在Angular反應形式中向FormArray添加自定義驗證器

Question

我有這樣的反應形式

this.form = this.fb.group({
      items: this.fb.array(
        [
          this.fb.group({
            net_amount: [
              null,
              Validators.compose([
                Validators.required,
                Validators.pattern('^[0-9]+(.?[0-9]+)?$'),
                isValidNumericValue
              ])
            ],
          })
        ],
        Validators.required
      ),
      substances: this.initAdditives(),
      net_total: [
        this.currentProduct.net_total || null,
        [
          Validators.required,
          Validators.pattern('^[0-9]+(.?[0-9]+)?$'),
          isValidNumericValue
        ]
      ]
    });

isValidNumericValue是一個自定義驗證器，它檢查數字是否大於零。 問題是驗證器在FormArray外部但不在內部。

  export function isValidNumericValue(AC: AbstractControl) {
    if (AC.value <= 0) {
      return { numericError: true };
    }
    return null;
  }

Answer 1

我認為您的問題是，由於您要將驗證器應用於fb.group，因此您應該這樣做：

this.fb.group({
      net_amount: [null, [Validators.required, Validators.pattern('^[0-9]+(.?[0-9]+)?$')]
    ],
  }, { validator: isValidNumericValue })

我將在此處向您發布一個同時包含驗證“組”和“單一”的表單：

首先，您需要創建驗證規則：

function emailMatch(c: AbstractControl): {[key: string]: boolean} | null {
    let email = c.get('email');
    let confirmEmail = c.get('confirmEmail');

    if (email.value === confirmEmail.value) {
        return null;
    }
    return { 'match': true };
 }

我將這種驗證用於產品的星級評定，例如：

function MyRangeFunction (min: number, max: number): ValidatorFn {
    return  (c: AbstractControl): {[key: string]: boolean} | null => {
        if (ifYouGotError) {
            return { 'range': true };
        };
        return null;
    };
}

現在我的表格是這樣的：

this.myForm = this.fb.group({
            emailGroup: this.fb.group({
                email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+')]],
                confirmEmail: ['', Validators.required],
            }, {validator: emailMatch}),

            rating: ['', MyRangeFunction (1, 5)],
        });

我認為這里已經涵蓋了驗證的全部內容！