【Angular】条件によって、バリデーションを設定したり、無効にする方法。

• facebook

オフィス狛 技術部のmmm（むー）です。

以前、Angularのプロジェクトでフォームの画面を作成しました。
そのフォームのinput項目に当然バリデーションを設定していたのですが、条件によってバリデーションを設定したり、無効にする必要がありました。
今回はその時のコードを備忘録も兼ねて紹介いたします。

対応方法

画面は下記のようなフォームが存在するとします。

名前：___________  メモ：___________ 

コードは下記となります。

 // バリデーション
  validations = {
    'name': [Validators.required],
    'memo': [Validators.maxLength(20)],
  };

ngOnInit() {
    // 初期値（空文字 ''）とバリデーションを設定
    this.exampleFormGroup = this.formBuilder.group({
        name: ['', this.validations.name],
        memo: ['', this.validations.memo]
    });
}

// バリデーションを削除します
public deleteValidation(form: FormGroup): void {
    for (const formControlName in form.controls) {
        form.get(formControlName).clearValidators();
        form.get(formControlName).updateValueAndValidity();
    }
}

// バリデーションを設定します
public setValidations(form: FormGroup): void {
	for (const formControlName in form.controls) {
	    form.get(formControlName).setValidators(this.validations[formControlName]);
	    form.get(formControlName).updateValueAndValidity();
	}
}

// バリデーションを切り替えます
switchFormValidations(): void {
	if (condition) {
		this.deleteValidation(this.exampleFormGroup);
	} else {
		this.setValidations(this.exampleFormGroup);
	}
}

・バリデーションを無効にします。clearValidators()を使用した後は、バリデーションの変更を更新するためにupdateValueAndValidity()を合わせて使用してください。 ・バリデーションを設定します。setValidators()を使用した後は、バリデーションの変更を更新するためにupdateValueAndValidity()を合わせて使用してください。
・ちなみに公式のページに記載されていましたが、既存のバリデーションに影響なくバリデーションを追加する場合はaddValidators()を使用するように推奨されているようです。

以上となります、参考になりましたら幸いです。

参考：https://angular.io/api/forms/AbstractControl (公式)

Angular