为 Angular 中动态添加的表单控件创建自定义验证器

Question

我是角度开发的新手，我被困在需要对动态添加的行执行验证的地步。

我使用模板驱动的表单。我有两个字段 ValidFrom 和 ValidTo 以及一组停电日期{fromdate and todate}。型号如下

export interface Rooms {
   validFrom?: Date | string;
   validTo?: Date | string;
  blackOutDateVM?: BlackOutDateVM[];

}

export class BlackOutDateVM {
    validFrom?: Date;
    validTo?: Date;
}

目前，当用户要提交表单以验证日期时，我会使用此功能。

 ValidateRateForDatesAndTax(): boolean {

     this.isFormValid = true;    

    if (this.rateDetail.isContainsBlackOutDates === true) {
      this.rateDetail.blackOutDateVM.forEach(item => {
        if (item.validFrom < item.validTo) {
          this.rateValidator.isBlackOutDatesValid = false;
        } else {
          this.rateValidator.isBlackOutDatesValid = true;
        }

        if (item.validFrom === null || item.validFrom === undefined) {
          this.rateValidator.isBlackOutDatesValid = false;
          this.isFormValid = false;
        } else {
          this.rateValidator.isBlackOutDatesValid = true;
        }

        if (item.validTo === null || item.validTo === undefined) {
          this.rateValidator.isBlackOutDatesValid = false;
          this.isFormValid = false;
        } else {
          this.rateValidator.isBlackOutDatesValid = true;
        }

        if (
          item.validFrom === null ||
          item.validFrom === undefined ||
          (item.validTo === null || item.validTo === undefined)
        ) {
          if (
            item.validFrom > this.rateDetail.validTo ||
            item.validTo < this.rateDetail.validFrom
          ) {
            this.rateValidator.isBlackOutDatesValid = false;
            this.isFormValid = false;
          } else {
            this.rateValidator.isBlackOutDatesValid = true;
          }
        }
      });
    }

    return this.isFormValid;
  }

我想确保不适用日期应在有效起始日期和有效截止日期范围内。谁能告诉我如何以角度执行此验证？

Answer 1

我建议你使用 Angular 的表单生成器服务，

所以让我建议你应该如何去做，

1. 通过在构造函数中导入、注入来创建FormBuilder，

2. 编写一个自定义验证函数，让它的行为就像你编写一个 onchange 事件函数

   yourValidationFunctionFrom(){} yourValidationFunctionTo(){}

3. 创建一个表单实例（如果需要）

   `this.yourForm = this._fb.group({
         BlackOutDate: this._fb.array([this.fb.control('From',[yourValidationFunctionFrom]),
   

   this.fb.control('To',[yourValidationFunctionTo])]) });`

使用表单生成器，您可以轻松地进行很多操作，您会惊讶于 Angular 中包含了如此多的内容来寻求我们的帮助