Angular5中提交按钮未按日期校验规则禁用问题求助

我明白你的问题了——你已经实现了日期大小的错误提示，但这个校验逻辑没有和Angular的表单验证体系绑定，所以form.invalid根本不知道这个自定义规则，导致按钮还是会在所有字段非空时启用。下面是具体的解决步骤：

问题根源 #

你现在的validation()函数只是在模板里判断是否显示错误，但没有把这个规则注册到表单的验证器中，所以FormGroup的invalid状态只检查了必填项，完全没考虑日期的大小关系。

解决方案步骤 #

1. 移除混合使用的ngModel #

Angular的响应式表单（Reactive Forms）不建议和ngModel混合使用，这会导致表单状态不一致。我们直接用formControlName来绑定控件，不需要[(ngModel)]。

2. 创建跨控件的自定义校验器 #

因为我们需要比较两个控件的数值，所以要写一个表单组级别的自定义校验器，而不是单个控件的：

// 自定义日期比较校验器
dateRangeValidator(group: FormGroup): ValidationErrors | null {
  const dateOne = group.get('dateOne').value;
  const dateTwo = group.get('dateTwo').value;
  
  if (dateOne && dateTwo) {
    const startDate = new Date(dateOne);
    const endDate = new Date(dateTwo);
    // 如果起始日期大于结束日期，返回错误对象
    return startDate > endDate ? { dateRangeInvalid: true } : null;
  }
  return null;
}

3. 把校验器添加到FormGroup初始化中 #

在创建FormGroup的时候，把上面的自定义校验器作为第二个参数传入：

ngOnInit() {
  this.doSearch();
  this.form = this.formBuilder.group({
    dateOne: ['', Validators.required],
    dateTwo: ['', Validators.required],
    selectedPersonId: ['', Validators.required]
  }, { validators: this.dateRangeValidator }); // 这里添加自定义校验器
}

4. 修改模板中的错误提示和控件绑定 #

去掉[(ngModel)]，并根据表单组的错误来显示提示：

<div class="modal-content">
  <form [formGroup]="form" (ngSubmit)="addProjecToClients()" >
    <div class="modal-header">
      <h4 class="modal-title">Affectation du projet aux clients</h4>
      <button type="button" class="close" (click)="largeModal.hide()" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div class="form-group row">
        <label class="col-sm-5 col-form-label">Choisir un client : </label>
        <div class="col-sm-6">
          <ng-select *ngIf="_listClients" 
                     [items]="_listClients" 
                     bindLabel="nom" 
                     bindValue="id" 
                     formControlName="selectedPersonId" >
          </ng-select>
        </div>
      </div>
      <label class="col-sm-5 col-form-label">Information liées au contrat : </label>
      <div class="form-group row">
        <label class="col-sm-5 col-form-label" >Date One : </label>
        <div class="col-sm-6">
          <input type="date" 
                 class="form-control form-control-sm" 
                 placeholder=".form-control-sm" 
                 formControlName="dateOne">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-5 col-form-label">Date Two : </label>
        <div class="col-sm-6">
          <input type="date" 
                 formControlName="dateTwo" 
                 class="form-control form-control-sm" 
                 placeholder=".form-control-sm">
          <!-- 根据表单组的错误显示提示 -->
          <span style="color:red" *ngIf="form.hasError('dateRangeInvalid')">
            Date fin doit etre plus grand que date debut .
          </span>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="largeModal.hide()">Close</button>
      <!-- 这里依然用form.invalid，现在会包含自定义校验的错误 -->
      <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Save changes</button>
    </div>
  </form>
</div><!-- /.modal-content -->

5. 移除多余的validation()函数 #

现在不需要自己写validation()了，所有校验逻辑都由Angular的表单验证器处理。

为什么这样能解决问题？ #

• 自定义校验器会在表单值变化时自动触发，更新FormGroup的invalid状态。
• 当日期不满足条件时，FormGroup会被标记为invalid，提交按钮的[disabled]="form.invalid"就会生效，按钮保持禁用。
• 移除ngModel避免了表单状态的不一致问题，让响应式表单的状态管理更可靠。

内容的提问来源于stack exchange，提问作者dEs12ZER