时间戳

首页 > 解决方案 > 角度反应形式和按钮禁用/启用

angular - 角度反应形式和按钮禁用/启用

问题描述

我在 component.html 中使用下面的代码

<button class="btn btn-primary" [disabled]="!projectForm.valid"
                    (click)="updateProjects()">Update</button>

Component.ts 代码如下

  this.projectForm = this.formBuilder.group({
      Name: new FormControl('', [Validators.required, Validators.pattern('^[a-zA-Z1-9][a-zA-Z1-9, _-]+$')]),
      ProjectID: new FormControl({ value: 'SQ123', disabled: true }),
      ProjectTypeID: new FormControl({ value: null, disabled: true}),
      ProjectSubTypeID: new FormControl({ value: null, disabled: true}),
      LifecycleTemplate: new FormControl('Plan', [Validators.required]),
      ConstructionTypeID: new FormControl({ value: null, disabled: true }, [Validators.required]),
      ContractTypeID: new FormControl({ value: null, disabled: true }, [Validators.required]),
      StartDate: new FormControl('', [Validators.required]),
      StartDateSub: new FormControl('', [Validators.required]),
      EndDate: new FormControl(''),
      EndDateSub: new FormControl(''),
      ProjectAddress: new FormControl({ value: null, disabled: true }, [Validators.required]),
      Description: new FormControl(''),
    });
    this.projectForm.controls['StartDateSub'].valueChanges.subscribe(value => {
      this.validateStartandEndDataSub();
    });
    this.projectForm.controls['EndDateSub'].valueChanges.subscribe(value => {
      this.validateStartandEndDataSub();
    });

使用this.validateStartandEndDataSub();功能更新按钮时未启用，因为this.validateStartandEndDataSub(); 如何解决错误以在填充所有值后启用更新按钮

  validateStartandEndDataSub() {
    const startDate = this.projectFormControls['StartDateSub'].value;
    const endDate = this.projectFormControls['EndDateSub'].value;
    if (endDate) {
      if (startDate > endDate) {
        this.projectFormControls['EndDateSub'].setErrors({ 'incorrect': true });
      } else {
        this.projectFormControls['EndDateSub'].setErrors({'incorrect': false});
      }
    }
  }

标签： angular

解决方案

编写一个自定义验证器并将其添加到表单组级别：

export function startBeforeEndValidator(startProp, endProp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const startCtrl = control.get(startProp);
    const endCtrl = control.get(endProp);
    const start = startCtrl ? startCtrl.value : null;
    const end = endCtrl ? endCtrl.value : null;
    return (start && end && start > end) ? {endBeforeStart: true} : null;
  };
}

然后就像任何其他验证器一样使用您的 from 组和控件属性作为参数注册它。

推荐阅读