Angularで、コントロールの作成後にValidatorをFormControlに追加するにはどうすればよいですか？

動的に構築されたフォームを持つコンポーネントがあります。バリデーターを使用してコントロールを追加するコードは、次のようになります。

var c = new FormControl('', Validators.required);

しかし、後で2番目のバリデーターを追加したいとします。どうすればこれを達成できますか？このオンラインに関するドキュメントは見つかりません。フォームコントロールにはsetValidatorsがありますが

this.form.controls["firstName"].setValidators 

しかし、新しいバリデーターまたはカスタムバリデーターを追加する方法は明確ではありません。

FormControlにバリデーターの配列を渡すだけです。

次に、既存のFormControlにバリデーターを追加する方法を示す例を示します。

this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

これにより、FormControlの作成時に追加した既存のバリデーターがリセットされることに注意してください。

@Delosdosが投稿したものに追加します。

FormGroup：でコントロールのバリデーターを設定します。 this.myForm.controls['controlName'].setValidators([Validators.required])

FormGroupのコントロールからバリデーターを削除します。 this.myForm.controls['controlName'].clearValidators()

上記のいずれかの行を実行したら、FormGroupを更新します。 this.myForm.controls['controlName'].updateValueAndValidity()

これは、フォームの検証をプログラムで設定するためのすばらしい方法です。

reactFormModuleを使用していて、formGroupが次のように定義されている場合：

public exampleForm = new FormGroup({
        name: new FormControl('Test name', [Validators.required, Validators.minLength(3)]),
        email: new FormControl('test@example.com', [Validators.required, Validators.maxLength(50)]),
        age: new FormControl(45, [Validators.min(18), Validators.max(65)])
});

このアプローチでFormControlに新しいバリデーターを追加する（そして古いバリデーターを保持する）ことができるよりも：

this.exampleForm.get('age').setValidators([
        Validators.pattern('^[0-9]*$'),
        this.exampleForm.get('age').validator
]);
this.exampleForm.get('email').setValidators([
        Validators.email,
        this.exampleForm.get('email').validator
]);

FormControl.validatorは、以前に定義されたすべてのバリデーターを含む構成バリデーターを返します。

元の質問は「formControlの作成後に新しいバリデーターを追加する方法」であるため、選択した回答は正しくないと思います。

私の知る限り、それは不可能です。あなたができる唯一のことは、バリデーターの配列を動的に作成することです。

しかし、私たちが見逃しているのは、formControlにすでに追加されているバリデーターをオーバーライドしない関数addValidator（）があることです。誰かがその要件に対する答えを持っているなら、ここに投稿されるといいでしょう。

Eduard Voidの回答に加えて、次のaddValidators方法があります。

declare module '@angular/forms' {
  interface FormControl {
    addValidators(validators: ValidatorFn[]): void;
  }
}

FormControl.prototype.addValidators = function(this: FormControl, validators: ValidatorFn[]) {
  if (!validators || !validators.length) {
    return;
  }

  this.clearValidators();
  this.setValidators( this.validator ? [ this.validator, ...validators ] : validators );
};

これを使用して、バリデーターを動的に設定できます。

some_form_control.addValidators([ first_validator, second_validator ]);
some_form_control.addValidators([ third_validator ]);