Angular2相互依賴的表單字段驗證

我有兩個表單字段，其中如果填寫第一個字段，第二個字段是必填字段。如果我嘗試在Angular2中使用自定義驗證器來執行此操作，驗證器僅在初始化時以及特定字段發生更改時觸發。Angular2相互依賴的表單字段驗證

案例： - 用戶填寫字段1 - 字段2應成爲必需，但直到用戶實際更改字段2（觸發自定義驗證）。

private createForm():void { 
this.testForm = this._formBuilder.group({ 
    'field1': [], 
    'field2': ['', this.validateRequired()] 
}); 
} 

private validateRequired(){ 
console.log("something", this); 
let component = this; 

return (control: Control): { [s: string]: boolean } => { 
    return component.testModel.field1 && !control.value {"required":true} : null; 
} 
}

看到這個plunkr：http://plnkr.co/edit/PEY2QIegkqo8BW1UkQS5?p=preview

編輯：

現在我訂閱了FIELD1的valueChange觀察到，當改變了場2手動進行檢查，如：

this.testForm.controls['field1'].valueChanges.subscribe(
    value => { 
    component.testForm.controls['field2].updateValueAndValidity();   
    } 
)

但我覺得必須有更好的方式來做到這一點。

來源

2016-06-14 Arne

參見http://stackoverflow.com/questions/31788681/angular2-validator-which-relies-on-multiple-form-fields/34582914#34582914 –

你可以使用一個全球性的驗證了這樣的組：

private createForm():void { 
this.testForm = this._formBuilder.group({ 
    'field1': [], 
    'field2': ['', this.validateRequired()] 
}, { 
    validator: this.someGlobalValidator // <----- 
}); 
} 

someGlobalValidator(group: ControlGroup) { // <----- 
    var valid = false; 

    for (name in group.controls) { 
    var val = group.controls[name].value 

    (...) 
    } 

    if (valid) { 
    return null; 
    } 

    return { 
    someValidationError: true 
    }; 
}

來源

2016-06-14 14:52:35

如果你只是想知道閹偉大的工程該表格是有效的。然而，我想向錯誤的字段顯示錯誤消息，這對組驗證器不會發生。 – Arne

我想，以解決阿恩的評論對亨利的回答擴大一點。爲了處理formgroup級別驗證器中多個字段和可能的多個驗證的驗證，解決方案是從驗證器返回一個函數，然後返回一個指示錯誤類型的對象。下面是一個匹配驗證器的例子，我添加了一些額外的錯誤來說明這一點。請注意，它返回一個可能具有多個屬性的對象，其中每個對象屬性都是任何字符串，並且該值是一個布爾值。

export function FieldMatchingValidator(field1: string, field2 :string) { 

    return (cg: FormGroup): { [s: string]: boolean } => { 
     let retVal = null; 
     let f1 = cg.controls[field1]; 
     let f2 = cg.controls[field2]; 
     retVal = f1.value === f2.value ? null : { fieldMismatch: true }; 
     if(somecondition){ 
      retVal['someerror'] = true; 
     } 
     if(someothercondition){ 
      retVal['someothererror'] = true; 
     } 
     return retVal; 
    } 
}

當這個驗證運行時，如果遇到一個錯誤條件，則該形式的錯誤屬性將與一個或多個屬性表明了不同的錯誤返回的對象進行填充。然後，你必須做的就是在具有驗證錯誤的控件上進行適當的角度屬性設置。

<div *ngIf="myForm.hasError('fieldMismatch')"> 
Field Mismatch 
</div> 

<div *ngIf="myForm.hasError('someerror')"> 
Some Error 
</div> 

<div [class.Errors]="myForm.hasError('someothererror')"> 
Some Other Error 
</div>

來源

2016-10-05 19:26:15 HisDivineShadow

Angular2相互依賴的表單字段驗證

回答

相關問題