Angular Form validation必选字段+可选字段

Question

我的问题是。我有一个非常大的表单，需要填写200个输入字段，其中有一个字段是必需的(标题)，但我还想检查他们是否至少填写了一个其他字段。哪一个都无所谓。但是一旦满足了这个要求，他们就可以提交表单了。

Answer 1

这很简单，参见Stackblitz的例子。你只需要将Validator设置为一个字段，然后勾选onSubmit所有其他字段的值:

onSubmit(): void {
let anyOtherControlIsFilled = false;
Object.keys(this.form.controls).forEach((key) => {
if (!this.form.controls[key].validator) {
if (
this.form.controls[key].value !== null &&
this.form.controls[key].value !== ''
) {
console.log('Passt');
anyOtherControlIsFilled = true;
}
}
});
if (this.form.valid && anyOtherControlIsFilled) {
this.submitted = true;
alert('All ok');
} else {
this.submitted = true;
alert('Error');
return;
}
console.log(JSON.stringify(this.form.value, null, 2));
}

问候,弗洛

Answer 2

为FormGroup添加验证器以检查所有输入

new FormGroup(
{
requiredControl: new FormControl(initialValue, [Validators.required]),
control1: new FormControl(...),
...
control200: new FormControl(...)
},
[someValueValidator()]
)
private someValueValidator() {
return (controls: AbstractControl) => {
// check if any non-required control is set then return null, 
// otherwise return ValidationError
}
}