將自定義驗證器添加到 Angular Reactive From 中的整個表單組

Question

我正在根據從 API 收到的 JSON 數據在 Angular 中動態創建反應式表單。 有時表單只有幾個表單控件，但有時有很多表單組或帶有表單組的表單數組。

我有一個關於帶有多個 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;
}

Answer 2

您可以使用 FormBuilder 服務添加這樣的表單組級別驗證器：

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()]);