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

Question

我正在根据从 API 收到的 JSON 数据在 Angular 中动态创建响应式(Reactive)表单。有时表单只有几个表单控件，但有时有很多表单组或带有表单组的表单数组。

我有一个关于带有多个 FormGroup 的 FormArray 的问题。在这个 FormGroups 中，一些 FormControl 可能是必需的，有些则不是。但是不需要整个 FormGroup。只有当组中的某些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;
}