Angular 2 - FormControl setValue'onlySelf'參數

嘗試瞭解傳遞給setValue時'onlySelf'參數的作用。Angular 2 - FormControl setValue'onlySelf'參數

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

的文件說：「如果onlySelf是真實的，這種變化只會影響這個FormControl的驗證，而不是它的父組件此默認爲false。」

但是我很難理解這一點。對於使用Angulars的模型驅動表單來說，這還是相當新穎的。

來源

2016-09-20 leepowell

Angular2默認會檢查窗體控件/窗體組的有效性，無論何時有任何表單元素值的更新，都會級聯到頂層，除非您說不。 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

然而，這樣的：

只有只會更改passwordControl的有效性：

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

來源

2016-09-20 23:25:41

認沽這樣，讓我們這樣說你有一個表格，名爲mainForm，它是有效的。它有四個控件，所有四個控件都有一個值。現在，您決定更新其中一個控件的值，假設您將其更新爲某個不正確的值，並指定onlySelf: true。如果您嘗試致電this.mainForm.valid，即使您的控制是無效，但您的表單仍爲有效，並且該表單無效，但不應允許表單提交。但由於表單有效屬性報告爲真，您將向後端提交不一致的值。

這可能會讓你困惑，爲什麼你會擁有這個屬性，但是當你不想因爲一個值或控件而使表單失效時，可能會出現這種情況。可能您在服務器上進行了一些高級檢查，並且您想要更正服務器上的值，或者您可能依賴於當時可能無法使用的某些外部Web服務的值。我敢肯定，有很多場景，但這是我頭頂的東西。

來源

2016-09-21 00:10:38

Angular 2 - FormControl setValue'onlySelf'參數

回答

相關問題