我正在處理在多個階段進行驗證的表單，很少有元素正常驗證，很少有元素在模糊時驗證，其他元素在提交時驗證。驗證作業不正常。如果有人知道更好的處理方式，請告訴我。謝謝
這是我的代碼：
constructor(
private changeDetectorRef: ChangeDetectorRef,
private el: ElementRef,
private _snackBar: MatSnackBar ) {
this.form = new FormGroup({});
this.form.addControl(`firstname`, new FormControl(''));
this.form.addControl(`lastname`, new FormControl(''));
this.form.addControl(`title`, new FormControl('',
Validators.compose([Validators.required])));
this.form.addControl(
`email`,
new FormControl(
'',
Validators.compose([
Validators.required,
Validators.pattern('^[a-zA-Z0-9_. -] @[a-zA-Z0-9-] .[a-zA-Z0-9-.] $'),
])
)
);
this.form.addControl(
`phoneNumber`,
new FormControl('', Validators.compose([Validators.required, Validators.pattern('^[0-9]*$')]))
);
this.form.addControl(
`termsAndConditions`,
new FormControl('', Validators.compose([Validators.required]))
);
this.changeDetectorRef.markForCheck();
}
addValidation() {
this.form.controls['firstname'].setValidators([Validators.required, Validators.minLength(2)]);
this.form.controls['lastname'].setValidators([Validators.required, Validators.minLength(2)]);
}
removeValidation() {
this.form.controls['firstname'].setValidators([]);
this.form.controls['lastname'].setValidators([]);
}
onSubmit() {
this.addValidation();
// rest of my logic
}
onCancelBtnClick() {
this.form.reset();
this.removeValidation();
}
uj5u.com熱心網友回復：
有一種更清潔的方法。在建構式中的代碼中進行一些更改，然后您將不需要 addValidation 和 removeValidation 方法。例如，這里我們在提交時對名字和姓氏應用驗證，在模糊時對電子郵件應用驗證。
this.form.addControl(`firstname`, new FormControl('', {
validators: Validators.compose([Validators.required, Validators.minLength(2)]), updateOn: 'submit'
}));
this.form.addControl(`lastname`, new FormControl('', {
validators: Validators.compose([Validators.required, Validators.minLength(2)]), updateOn: 'submit'
}));
this.form.addControl(`title`, new FormControl(''));
this.form.addControl(
`email`,
new FormControl(
'',
Validators.compose([
'', {
validators: Validators.compose([
Validators.required,
Validators.pattern('^[a-zA-Z0-9_. -] @[a-zA-Z0-9-] .[a-zA-Z0-9-.] $'),
])
]), updateOn: 'blur'
}
)
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/347461.html