フォームコントロールを自在に操る！Angular リアクティブフォームで入力フィールドを無効にする

Angular リアクティブフォームで入力フィールドを無効にする

disabled プロパティを使う

FormControl オブジェクトには disabled プロパティがあり、これを true に設定することで、そのフィールドを無効にすることができます。

import { FormGroup, FormControl } from '@angular/forms';

const myForm = new FormGroup({
  name: new FormControl(''),
  email: new FormControl(''),
});

// フィールドを無効にする
myForm.get('name').disable();

// フィールドを有効にする
myForm.get('name').enable();

formState プロパティを使って、フォームの状態を監視し、それに応じてフィールドを無効にすることができます。

<input type="text" formControlName="name" [disabled]="formState.disabled">

テンプレート駆動フォームを使う場合は、ngDisabled ディレクティブを使ってフィールドを無効にすることができます。

<input type="text" [(ngModel)]="name" ngDisabled="isDisabled">

カスタムバリデーターを使って、フィールドを無効にする条件を設定することができます。

import { FormGroup, FormControl, Validators } from '@angular/forms';

const myForm = new FormGroup({
  name: new FormControl('', [Validators.required, myCustomValidator]),
});

// カスタムバリデーター
function myCustomValidator(control: FormControl): Validators {
  if (control.value === 'invalid') {
    return {
      myCustomError: true,
    };
  }
  return null;
}

FormBuilder を使ってフォームを作成する場合は、disabled オプションを使ってフィールドを無効にすることができます。

import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

const formBuilder = new FormBuilder();

const myForm = formBuilder.group({
  name: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
});

// フィールドを無効にする
myForm.get('name').disable();

// フィールドを有効にする
myForm.get('name').enable();

これらの方法のいずれを使用しても、Angular リアクティブフォームで入力フィールドを無効にすることができます。 どの方法を使用するかは、要件と状況によって異なります。

<form [formGroup]="myForm">
  <input type="text" formControlName="name" />
  <button (click)="disableName()">名前フィールドを無効にする</button>
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  myForm: FormGroup;

  constructor() {}

  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl(''),
    });
  }

  disableName() {
    this.myForm.get('name').disable();
  }

}

formState を使う

<form [formGroup]="myForm">
  <input type="text" formControlName="name" [disabled]="formState.disabled">
  <button (click)="disableForm()">フォーム全体を無効にする</button>
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  myForm: FormGroup;

  constructor() {}

  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl(''),
    });
  }

  disableForm() {
    this.myForm.disable();
  }

}

テンプレート駆動フォームを使う

<form>
  <input type="text" [(ngModel)]="name" ngDisabled="isDisabled">
  <button (click)="disableName()">名前フィールドを無効にする</button>
</form>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  name: string;
  isDisabled: boolean;

  constructor() {}

  ngOnInit() {
    this.name = '';
    this.isDisabled = false;
  }

  disableName() {
    this.isDisabled = true;
  }

}

カスタムバリデーターを使う

<form [formGroup]="myForm">
  <input type="text" formControlName="name" />
  <button (click)="disableName()">名前フィールドを無効にする</button>
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  myForm: FormGroup;

  constructor() {}

  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl('', [Validators.required, myCustomValidator]),
    });
  }

  disableName() {
    this.myForm.get('name').disable();
  }

  // カスタムバリデーター
  myCustomValidator(control: FormControl): Validators {
    if (control.value === 'invalid') {
      return {
        myCustomError: true,
      };
    }
    return null;
  }

}

FormBuilderを使う

<form [formGroup]="myForm">
  <input type="text" formControlName="name" />
  <button (click)="disableName()">名前フィールドを無効にする</button>
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit

Angular リアクティブフォームで入力フィールドを無効にする他の方法

FormGroup の setValidators メソッドを使う

FormGroup オブジェクトには setValidators メソッドがあり、これを使ってフォーム全体にバリデーターを設定することができます。 バリデーター関数の中で、特定の条件に基づいてフィールドを無効にすることができます。

import { FormGroup, FormControl, Validators } from '@angular/forms';

const myForm = new FormGroup({
  name: new FormControl(''),
  email: new FormControl(''),
});

// バリデーター関数
function myValidator(formGroup: FormGroup): Validators {
  if (formGroup.get('name').value === 'invalid') {
    formGroup.get('email').disable();
  }
  return null;
}

// バリデーターを設定
myForm.setValidators(myValidator);

FormControl オブジェクトには setValue メソッドがあり、これを使ってフィールドの値を設定することができます。 値に null または undefined を設定すると、フィールドが無効になります。

import { FormGroup, FormControl } from '@angular/forms';

const myForm = new FormGroup({
  name: new FormControl(''),
});

// フィールドを無効にする
myForm.get('name').setValue(null);

ReactiveFormsModule モジュールには disable ディレクティブがあり、これを使ってテンプレートの中でフィールドを無効にすることができます。

<form [formGroup]="myForm">
  <input type="text" formControlName="name" [disable]="isDisabled">
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  myForm: FormGroup;
  isDisabled: boolean;

  constructor() {}

  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl(''),
    });
    this.isDisabled = false;
  }

}