所以我有一個表單，只有當另一個控制元件有值時才需要一個控制元件，為此我創建了以下結構
profileGroup = this.fb.group({
username: [''],
address: [
'',
[
(control: AbstractControl) => {
if (this.profileGroup?.get('username')?.value) {
return (Validators.required)(control);
}
return (Validators.nullValidator)(control);
},
],
],
});
這個函式效果很好，一旦username 控制元件獲得一個值，就會將aValidators.required添加到address控制元件中。但是，盡管添加了驗證器，但address控制元件的有效性并未更新，因此控制元件仍標記為valid。
如果可能的話，我想避免使用類似的東西
this.profileGroup.get('username')?.valueChanges.subscribe(val=>{
this.profileGroup.get('address')?.updateValueAndValidity()
})
因為可能有我不知道名稱的動態控制元件，并且不想為每個控制元件設定一個可觀察的物件。
這是一個作業示例的堆疊閃電戰 https://stackblitz.com/edit/angular-10-formbuilder-example-m8qjq8?file=src/app/app.component.ts
uj5u.com熱心網友回復：
這個函式效果很好，一旦用戶名控制元件得到一個值，一個 Validators.required 被添加到地址控制元件中。然而，盡管添加了驗證器，地址控制元件的有效性并未更新，因此該控制元件仍被標記為有效。
好吧，事實并非如此。您已經custom為addressFormControl定義了一個驗證器，它會在addressFormControl 值更新時執行。（PS：它不是動態驗證器）
當您更新 時username，將呼叫與其關聯的驗證器及其祖先（在您的情況下為 profileGroup），不會觸發同級 FormControl 驗證器。
當您執行以下代碼時，您正在手動執行與addressFormControl關聯的驗證器，并且不會更新 FormControl 的有效性。它只是執行與 FormControl 關聯的驗證器并回傳它們的結果。
const validator = abstractControl.validator({} as AbstractControl);
為了更新同級即addressFormControl 有效性，您必須呼叫它的updateValueAndValidity().
另一種選擇是在 FormGroup 級別定義驗證器，它將自動執行，您不必手動呼叫updateValueAndValidity()任何 FormControl。但是，使用這種方法，驗證錯誤將在 FormGroup 級別設定。
因為可能有我不知道名稱的動態控制元件，并且不想為每個控制元件設定一個可觀察的物件。
如果您不知道控制元件名稱，那么您將如何在自定義驗證器中使用它們，如下所示，其中usernameFormControl 被參考？
this.profileGroup?.get('username')?.value
有一種方法可以呼叫updateValueAndValidity()formControl，無需明確指定它的名稱，但不會推薦它。您可以在每個控制元件上回圈profileGroup.controls并執行updateValueAndValidity，然后是 profileGroup 本身。您還必須注意傳遞{onlySelf: true, emitEvent: false}選項updateValueAndValidity以避免遞回。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/402118.html