form.valid プロパティを使う

Angularで送信ボタンを無効にする方法

disabled プロパティを使う

最も簡単な方法は、disabled プロパティを true に設定することです。

<button type="submit" [disabled]="isDisabled">送信</button>

isDisabled は、ボタンを無効にするかどうかを決定するブール値のプロパティです。このプロパティは、コンポーネントのクラスファイルで定義する必要があります。

export class MyComponent {
  isDisabled: boolean = false;

  // ...

  onSubmit() {
    // フォーム送信処理
  }
}

form.valid プロパティを使う

フォーム全体が有効かどうかによってボタンを無効にする場合は、form.valid プロパティを使うことができます。

<button type="submit" [disabled]="!form.valid">送信</button>

form.valid は、フォーム全体が有効かどうかを示すブール値のプロパティです。

ngSubmit イベントを使って、送信ボタンがクリックされたときにボタンを無効にすることもできます。

<form (ngSubmit)="onSubmit()">
  <button type="submit">送信</button>
</form>

export class MyComponent {
  onSubmit() {
    // フォーム送信処理
    this.isDisabled = true;
  }
}

Reactive Forms を使っている場合は、FormControl の disabled プロパティを使ってボタンを無効にすることができます。

<button type="submit" [disabled]="formControl.disabled">送信</button>

export class MyComponent {
  formControl = new FormControl('');

  // ...

  onSubmit() {
    // フォーム送信処理
  }
}

<form>
  <input type="text" name="name" [(ngModel)]="name">
  <button type="submit" [disabled]="isDisabled">送信</button>
</form>

export class MyComponent {
  name = '';
  isDisabled = false;

  onSubmit() {
    // フォーム送信処理
  }
}

<form>
  <input type="text" name="name" [(ngModel)]="name" required>
  <button type="submit" [disabled]="!form.valid">送信</button>
</form>

ngSubmit イベントを使う

<form (ngSubmit)="onSubmit()">
  <input type="text" name="name" [(ngModel)]="name">
  <button type="submit">送信</button>
</form>

export class MyComponent {
  name = '';

  onSubmit() {
    // フォーム送信処理
    this.isDisabled = true;
  }
}

Reactive Formsを使う

<form [formGroup]="formGroup">
  <input type="text" formControlName="name">
  <button type="submit" [disabled]="formControl.disabled">送信</button>
</form>

export class MyComponent {
  formGroup = new FormGroup({
    name: new FormControl(''),
  });

  // ...

  onSubmit() {
    // フォーム送信処理
  }
}

ngClass ディレクティブを使って、ボタンに disabled クラスを追加することで、ボタンを無効にすることができます。

<button type="submit" [ngClass]="{'disabled': isDisabled}">送信</button>

export class MyComponent {
  isDisabled: boolean = false;

  // ...

  onSubmit() {
    // フォーム送信処理
  }
}

<button type="submit" [attr.disabled]="isDisabled">送信</button>

テンプレート変数を使って、ボタンの disabled プロパティに直接アクセスすることで、ボタンを無効にすることができます。

<button type="submit" #submitButton [disabled]="submitButton.disabled">送信</button>

export class MyComponent {
  // ...

  onSubmit() {
    // フォーム送信処理
    this.submitButton.disabled = true;
  }
}

これらの方法は、上記の方法よりも柔軟性がありますが、コードが複雑になる場合もあります。