Angular响应式表单表单验证触发另一个字段校验

前言

在某些业务场景中，校验某表单字段的同时也需要校验另外一个与之相关的字段，例如开始时间和结束时间，要求结束时间必须晚于开始时间。在angular 响应式表单中改如何实现该需求呢，本文带你解读一下实现细节。

表单字段

constructor(
    private router: Router,
    public activatedRoute: ActivatedRoute,
    private apiService: AccountAssetService,
    private toast: Toast,
    public fb: FormBuilder,
    private http: HttpClient,
    private configService: ConfigService
  ) {
    this.validateForm = this.fb.group({
      platCateUniqueUrl: ['', [SyncValidators.customRequired()]],
      dataAssetId: ['', []],
      devId: ['', []],
      bizId: ['', []],
      accName: ['', [SyncValidators.customRequired()]],
      password: [''],
      accStatus: ['', [SyncValidators.customRequired()]],
      oauthType: [''],
      accountJurisdiction: [''],
      accountUsageType: [''],
      beginTime: [null,[this.beginTimeSync()]],  /** 开设时间 */
      endTime: [null, [this.endTimeSync()]], /** 到期时间 */
      orgId: [''],
      perId: ['', [SyncValidators.customRequired()]],
      accRemark: [''],
    })
  }

日期校验函数

// 开始时间校验
beginTimeSync(){
    return (control: AbstractControl): SyncValidatorFnReturn => {
      const beginTime = control.value
      const endTime = control.parent?.value["endTime"]
      if (beginTime && endTime) {
        this.validateForm.get('endTime')?.updateValueAndValidity()
      }
      return null
    };
  }

// 结束时间校验
  endTimeSync() {
    return (control: AbstractControl): SyncValidatorFnReturn => {
      const beginTime =control.parent?.get("beginTime")?.value
      const endTime = control.value

      if (beginTime && endTime) {
        const beginTimeNum = beginTime.getTime()
        const endTimeNum = endTime.getTime()
        if (beginTimeNum >= endTimeNum) {
          return { validError: '到期时间必须晚于开设时间' }
        }
      }
      return null
    };
  }

效果

先选择到期时间，再选择开始时间。校验开始时间的同时自动触发到期时间的校验