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的表单构建器服务，

所以让我建议你应该怎么做，

通过导入，注入构造函数来创建FormBuilder，
编写一个自定义验证函数，使其行为类似于编写函数onchange事件

yourValidationFunctionFrom(){} yourValidationFunctionTo(){}

创建表单实例（如果需要）

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

this.fb.control（'To'，[yourValidationFunctionTo]）]） }）;`

使用表单生成器，您可以轻松地执行很多操作，您会惊讶于其中的角度如此丰富

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

1 个答案: