在Angular Reactive Forms中的FormGroup實例上設置錯誤不能按預期方式工作

我正在使用Angular 4.4.3反應窗體來實現窗體中一組控件的自定義驗證。方法AbstractControl.setErrors根據文檔更新AbstractControl的錯誤屬性，在其上調用它，更新其父項的狀態，但不更新父項錯誤屬性。我想在FormGroup實例上設置errors屬性，所以我使用FormGroup繼承的setErrors。但是，它不會按預期更新錯誤。在Angular Reactive Forms中的FormGroup實例上設置錯誤不能按預期方式工作

下面是我的示例代碼：嘗試它FormControl情況下，不更新自己的錯誤，以及他們父母的有效性狀態（不是父母的錯誤，但！）：

let myFormGroup 
    = this._formBuilder 
      .group({ 
        ctrl1: [null], 
        ctrl2: [null] 
       }, 
       { 
        validator: (fg: FormGroup) => { 
            let ctrl1 = fg.get('ctrl1'), 
             ctrl2 = fg.get('ctrl2'), 
             ctrl1Empty = !ctrl1.value, 
             ctrl2Empty = !ctrl2.value; 

             //Successfully sets ctrl1.errors and fg.status, but not fg.errors 
             if (ctrl1empty) 
             ctrl1.setErrors({ctrl1required: true}); 
             //Successfully sets ctrl2.errors and fg.status, but not fg.errors 
             if (ctrl2Empty) 
             ctrl2.setErrors({ctrl2required: true}); 
             //Doesn't work, doesn't update fg.errors 
             if (ctrl1Empty && ctrl2Empty) 
             fg.setErrors({required: true}); 
           } 
       })

任何想法，爲什麼？

來源

2017-09-25 Bahaa

爲了進一步闡明：直接從驗證器返回錯誤（即'return {required：true}'），但仍然在'FormGroup'實例中'setErrors'的行爲不一致，它們是'AbstractControl'。 – Bahaa

所以，感謝@ incognito的確認，我在進一步檢查後發現問題出在哪裏。

setErrors，設置表單組實例的errors屬性。但是，我的問題中顯示的自定義驗證器沒有顯式返回一個值（即錯誤的未定義值）。在angular角度查看反應形式模塊的代碼，我發現this method，它合併了由this line中的各種驗證器引發的錯誤，該方法檢查錯誤（未在我的代碼片段中定義）是否不等於null。這種情況（在es5版本中檢查過）評估爲false，導致結果爲空，從而忽略代碼中設置的錯誤屬性的內容。我學到的教訓是：即使進一步嵌套的FormGroup實例具有自己的用於設置錯誤的自定義邏輯，也總是從自定義驗證器返回一個值。

來源

2017-09-26 11:59:19 Bahaa

在Angular Reactive Forms中的FormGroup實例上設置錯誤不能按預期方式工作

回答

相關問題