将自定义验证器添加到 Angular Reactive From 中的整个表单组

Question

我正在根据从API接收的JSON数据在Angular中动态创建反应式表单。有时表单只有几个 formControls，但有时有很多表单组或带有 FormGroups 的 formArray。

我有一个关于具有多个FormGroups的FormArray的问题。在此窗体组中，某些窗体控件可能是必需的，有些则不是。但不需要整个表单组。仅当编辑组中的某些 FormControls 时，之后整个窗体组必须有效(每个必需的 FormControl 不能为空(。

所以我的问题是如何为整个 FormGroup 创建自定义验证器，这将确保如果这些具体组中的每个 FormControl 都是空的，那么这个组将是有效的。但是，例如，如果要编辑一个 FormControl，则必须填充每个必需的 FormControl。

非常感谢您的想法。

Answer 1

尝试这个简单的解决方案怎么样

这是我的表单初始化

this.sponsorshipForm = this.fb.group(
  {
    startDate: ['', [Validators.required]],
    endDate: ['', [Validators.required]]
  },
  { validators: [this.sponsorshipDurationValidation] }
);

这是我的验证器，您可以制作任何您需要的东西并对其进行自定义

sponsorshipDurationValidation(form: FormGroup) {
   if (form.value.startDate && form.value.end) {
     console.log('form ', form, form.status);
   }
   if (something false happen or not valid value) {
     return { validUrl: true };
  }
  return null;
}

Answer 2

您可以使用表单生成器服务添加表单组级别验证器：

this.myFormGroup = this.formBuilder.group({ 
                     ... my group info ... 
                   }, {validators: [... validators ... ]);

自定义验证程序

的行为与其他任何验证程序类似，但本例中的抽象控件是一个 FormGroup，可以像任何其他窗体组一样处理。

像这样：

function allOrNoneRequired(): ValidatorFn {
  return (ctrl: AbstractControl): ValidationErrors | null => {
    const fg = ctrl as FormGroup;
    const controls = Object.values(fg.controls);
    return (controls.every(fc => !fc.value) || controls.every(fc => !!fc.value))  
             ? null 
             : {allOrNoneRequired: true};
  };
}

然后

this.myFormGroup = this.formBuilder.group({ 
                     ... my group info ... 
                   }, {validators: [allOrNoneRequired()]);