角度無功表單根據控件進行自動組驗證

Question

我不確定這是否是預期的行爲;我有以下幾點：

this.formGroup = this.fb.group({ 
 
    name: this.fb.group({ 
 
    firstName: ['', Validators.required], 
 
    lastName: ['', Validators.required] 
 
    }) 
 
});

<div formGroupName="name"> 
 
    <input type="text" formControlName="firstName"> 
 
    <input type="text" formControlName="lastName"> 
 
</div>

當我提交表單和console.log(this.formGroup)，的nameAbstractControl的errors對象爲null。我預計它應該有一個Object與required: true。我哪裏錯了？

Answer 1

感謝@yurzui您指出相關issue - 這是一種變通方法，將簡單地檢查這兩個控件：

import {AbstractControl} from '@angular/forms'; 
 

 
export const nameValidator = (control: AbstractControl): {[key: string]: boolean} => { 
 
\t const firstName = control.get('firstName'); 
 
\t const lastName = control.get('lastName'); 
 
\t if (!firstName || !lastName) { 
 
\t \t return null; 
 
\t } 
 
\t return firstName.value && lastName.value ? null : { required: true }; 
 
};

這需要顯式的作爲驗證程序當然：

name: this.fb.group({ 
 
    firstName: ['', Validators.required], 
 
    lastName: ['', Validators.required] 
 
}, {validator: nameValidator}),