我正在使用Angular 11反應式表單，有以下7個欄位。
- 開始日期（強制性）
- 結束日期（必須）
至少有一個欄位被填寫
我的表單只有在開始和結束日期被選中并且在其他五個欄位中至少有一個欄位被填寫時才有效。我怎樣才能把這個自定義的驗證器放在我的反應式表單中？ 下面是我的模板表單組件。
this.myForm = new FormGroup({
startDate: new FormControl('', Validators.required),
endDate: new FormControl('', Validators.required),
phoneNumber: new FormControl(''),
地址：new FormControl('')。
作者：new FormControl(),
userID：new FormControl('')。
公司：新的表單控制元件('')
}, { validators: dateValidator }.
);
uj5u.com熱心網友回復：
下面是一個基本的例子，你的自定義驗證器可能看起來像：
export const atLeastOneValidator = (keys: string[] ) => {
return (group: FormGroup) => {
const { controls } = 組; { = group;
return keys.some(key => controls[key] && !controls[key].value)
空？
: { atLeastOne: 'error' };
};
};
下面是你如何使用它的方法：
this.myForm = new FormGroup(
{
startDate: new FormControl('', Validators.required),
endDate: new FormControl('', Validators.required),
phoneNumber: new FormControl(''),
地址：new FormControl('')。
作者：new FormControl(),
userID：new FormControl('')。
公司：new FormControl('')
},
{ 驗證器：dateValidator, atLeastOneValidator(['phoneNumber', 'address', 'author', 'userID', 'company']) }; }
);
uj5u.com熱心網友回復：
你需要其中一個存在。而不是兩個都有。因此，洗掉你在它們兩個上的Validators.required
this.myForm = new FormGroup({
startDate: new FormControl(''),
endDate: new FormControl(''),
phoneNumber: new FormControl(''),
地址：new FormControl(''),
作者：new FormControl(),
userID：new FormControl('')。
公司：新的表單控制元件('')
});
然后在表單中添加一個自定義的Validator
this.myForm.setValidators(this.atLeastOneFieldValidator())
然后創建這個驗證器
public atLeastOneFieldValidator() : ValidatorFn{
return (group: FormGroup): ValidationErrors => {
const startDate = group.controls['startDate'];
const endDate = group.controls['endDate'];
if (!startDate.value && !endDate.value) {
startDate.setErrors({atLeastOneError: "startDate or endDate must be filled"}) 。
} else {
startDate.setErrors(null);
}
回傳。
};
}
然后在你的html中，讓這個錯誤顯示在只存在于這兩個欄位中的一個被修改時。而不是在開始狀態。
<div>
<form [formGroup]="myForm">
......
<div *ngIf="( myForm.controls['startDate'].dirty || myForm.controls['startDate'].touched || myForm.controls['endDate'].dirty || myForm.controls['endDate'].touched ) & & myForm.controls['startDate'].error? .atLeastOneError>
{{myForm.controls['startDate'].errors.atLeastOneError}}。
</form>
</div>
uj5u.com熱心網友回復：
我使用了下面的代碼來解決這個問題。
我使用了下面的代碼來解決這個問題。
this.myForm = new FormGroup(
{
startDate: new FormControl('', Validators.required),
endDate: new FormControl('', Validators.required),
phoneNumber: new FormControl(''),
地址：new FormControl('')。
作者：new FormControl(),
userID：new FormControl('')。
公司：new FormControl('')
},
{ 驗證器。[dateValidator, atLeastOneValidator] }; { validators: [dateValidator, atLeastOneValidator] }.
);
Validator函式 :
export const atLeastOneValidator :ValidatorFn=(control: AbstractControl): ValidationErrors | null => {
如果((control.get('phoneNumber')?.value!='')|(control.get('address')?.value!='')
||(control.get('author')?.value!='')||(control.get('userID')?.value!='')
||(control.get('company')?.value!='')){
回傳null。
}
else{
return {atLeastone : 'error'};
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/311820.html
標籤：