web-dev-qa-db-ja.com

Angular 2-FormControl setValue 'onlySelf'パラメーター

SetValueに渡すときに 'onlySelf'パラメーターが何をするかを理解しようとしています。

this.form.get('name').setValue('', { onlySelf: true })

ドキュメントには、「onlySelfがtrueの場合、この変更はこのFormControlの検証にのみ影響し、親コンポーネントには影響しません。デフォルトはfalseです。」

しかし、私はこれを理解するのに苦労しています。 Angularsのモデル駆動型フォームを使用することはまだかなり新しいです。

formsangularsetvalue
19
leepowell

デフォルトでは、Angular2は、フォーム要素の値が更新されるたびに、noと言わない限り、フォームコントロール/フォームグループの有効性をトップレベルまで段階的にチェックします。 onlySelfは、そのためのツールです。

loginFormフィールドとusernameフィールドを持つpasswordがあるとします。両方とも以下のように必須です：

this.userNameControl = this.formBuilder.control('Harry', Validators.required);
this.passwordControl = this.formBuilder.control('S3cReT', Validators.required);
this.loginForm = this.formBuilder.group({
  userName: this.userNameControl,
  password: this.passwordControl
});

このコードの後、this.loginForm.validはtrueです。

デフォルト設定を使用してコントロールの値を設定した場合（onlySelf = false）、Angular2はコントロールの有効性とフォームグループの有効性を更新します。たとえば、これ：

this.passwordControl.setValue('');

になります

this.passwordControl.valid === false
this.loginForm.valid === false

ただし、これ：

this.passwordControl.setValue('', { onlySelf: true });

passwordControlの有効性のみを変更します：

this.passwordControl.valid === false
this.loginForm.valid === true
35
Harry Ninh

このように言えば、mainFormと呼ばれる有効というフォームがあるとしましょう。 4つのコントロールがあり、4つすべてに値があります。ここで、コントロールの1つの値を更新することにしました。それを誤った値に更新し、onlySelf: trueを指定したとします。 this.mainForm.validを呼び出そうとすると、コントロールが無効であるにもかかわらず、フォームが有効であり、無効な状態では許可されないという結果が得られます。送信するフォーム。しかし、フォームの有効なプロパティがtrueを報告しているため、一貫性のない値をバックエンドに送信することになります。

このプロパティを使用する理由はわかりにくいかもしれませんが、1つの値またはコントロールのためにフォームを無効にしたくない場合があります。おそらく、サーバーにいくつかの高度なチェックがあり、サーバーの値を修正するか、その時点では利用できない外部Webサービスの値に依存している可能性があります。多くのシナリオがあると確信していますが、これは私の頭の上のものです。

12
Husein Roncevic