web-dev-qa-db-ja.com

Angular2-フォームの「touched」プロパティをtrueに設定する方法

コンポーネントにリアクティブフォームがあり、touchedと等しい入力のすべてにtrueプロパティを設定したい。私の現在のコードはこれを行いますが、エラーCannot set property touched of #<AbstractControl> which has only a getter：

addressForm: FormGroup;

...

this.addressForm = this._fb.group({
    street: ["", [<any>Validators.required]],
    city: ["", [<any>Validators.required]],
    state: ["", [<any>Validators.required]],
    zipCode: ["", [<any>Validators.required]],
    country: ["", [<any>Validators.required]]
});

...

for (var key in this.addressForm.controls) {
    this.addressForm.controls[key].touched = true;
}

すべての入力のtouched値をtrueに設定するにはどうすればよいですか？

formsangularangular2-formsreactive-forms
16
georgej

これを行うには、非常に簡単な方法があります：markAsTouched。フォームグループで使用するのに十分なはずです。

this.addressForm.markAsTouched()

何らかの理由ですべてのコントロールを手動でマークする場合は、コントロール自体でこのメソッドを使用できます。

markAsTouchedは、すべてのフォーム要素が継承するAbstractControlのメソッドです。好奇心から、あなたは@angular/forms/src/model.d.ts宣言ファイルを使用して、フォームオブジェクトのさらに興味深いメソッドを見つけます。または、単に documentation にアクセスしてください。

46
Mateusz Kocz

HTMLフォーム要素で#myForm="ngForm"を使用する場合、HTMLでmyForm.submittedにアクセスできるため、.touchedに煩わされる必要がない場合があります。

0
Ron Newcomb