web-dev-qa-db-ja.com

Angularでは、コントロールが作成された後にValidatorをFormControlに追加する方法は？

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

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

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

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

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

angularformsangular-reactive-forms
53
melegant

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

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

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

これにより、FormControlの作成時に追加した既存のバリデーターがリセットされます。

68
Andy-Delosdos

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

セットFormGroup内のコントロールのバリデーター：this.myForm.controls['controlName'].setValidators([Validators.required])

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

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

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

48
shammelburg

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

public exampleForm = new FormGroup({
        name: new FormControl('Test name', [Validators.required, Validators.minLength(3)]),
        email: new FormControl('[email protected]', [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は、以前に定義されたすべてのバリデーターを含む構成バリデーターを返します。

34
Eduard Void

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

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

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

1
user2992476