Angularで入力が空の場合にボタンを無効にする方法

1. テンプレート駆動フォームの場合: テンプレート駆動フォームを使用している場合は、ngModelディレクティブを使用して入力値をバインドします。ボタンのdisabled属性に条件式を設定することで、入力が空の場合にボタンを無効にすることができます。

<input type="text" [(ngModel)]="inputValue" name="inputField">
<button [disabled]="inputValue === ''">ボタン</button>

2. リアクティブフォームの場合: リアクティブフォームを使用している場合は、FormGroupとFormControlを使用して入力値を管理します。FormControlのvalueChangesイベントを購読し、入力値が変更された際にボタンの状態を制御します。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="inputField">
      <button [disabled]="myForm.get('inputField').value === ''">ボタン</button>
    </form>
  `
})
export class FormComponent implements OnInit {
  myForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.myForm = this.formBuilder.group({
      inputField: ['', Validators.required]
    });
  }
}

上記の例では、inputFieldという名前のフォームコントロールを定義し、requiredバリデータを使用して入力を必須に設定しています。ボタンのdisabled属性は、フォームコントロールの値が空かどうかをチェックしています。

これらの方法を使用することで、Angularで入力が空の場合にボタンを無効にすることができます。必要に応じて、追加のバリデーションルールやエラーメッセージを設定することもできます。