根据输入启用/禁用按钮

Question

我有一个用于选择日期的输入字段。 我想应用简单的验证，如果此字段为空，则提交按钮应在填充时禁用并启用，并且应保持同步。

日期字段有一些问题，当我通过 ng-valid 检查时，如果没有在日期字段中输入任何内容，它应该给出 false，但它从一开始就给出 true。

我使用 StackBlitz 创建了一个简单的示例，它具有单个日期输入，现在我需要在输入字段为空时禁用它，并在输入填充时激活它。

https://stackblitz.com/edit/ngx-daterangepicker-material-for-angular8-5ikovy?file=src/app/app.component.html

Answer 1

这是由于日期选择器部分的执行不力。 默认情况下，他们将控件的值设置为{start: null, end: null} 。 https://stackblitz.com/edit/ngx-daterangepicker-material-for-angular8-fa73zq?file=src/app/app.component.html

默认的required验证器检查controlValue == null以及由库设置为控件的对象是否不是 null-ish。 如果你需要使用这个库，你需要编写你的自定义验证器来检查start和end是否都为空，如果是，它应该返回一个错误。

你在这里检查如何做到这一点： https ://angular.io/guide/form-validation#adding-custom-validators-to-template-driven-forms

Answer 2

默认情况下，当您的输入日期为空时，其值为{ "start": null, "end": null } 。 所以“必需”验证器不会使值无效，因为这是一个有效的对象。

一个简单的修复方法：

<button
  [disabled]="!(date.value.start && date.value.end)"
>...</button>

Answer 3

正如其他人所提到的，这是由于值为{ start: null, end: null } 。 您可以通过创建自定义验证器来解决此问题 - 这样做的好处是您的表单的有效状态将是正确的。

您可以将验证器定义为如下指令（您的日期选择器包中可能已经存在一个接口，因此可能不需要该部分）：

interface DateRange {
  start: Moment | null;
  end: Moment | null;
}

@Directive({
  selector: '[appDateRange]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: DateRangeValidatorDirective,
      multi: true,
    },
  ],
})
export class DateRangeValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    return this.dateRangeValidator(control);
  }

  dateRangeValidator: ValidatorFn = (
    control: AbstractControl
  ): ValidationErrors | null => {
    if (!control.value) return null;
    const dateRange = control.value as DateRange;
    console.log('VALIDATE', dateRange);
    return dateRange.start && dateRange.end ? null : { dateRange: true };
  };
}

确保在你的模块中也定义这个：

@NgModule({
  declarations: [
    ...
    DateRangeValidatorDirective
  ]
  ...
})

然后，您可以使用它，就像使用指令选择器（ appDateRange ）对输入required的验证器一样：

<input ... appDateRange>

所以你的按钮上可以有：

<button ... [disabled]="date.errors?.required && date.errors?.dateRange"> ...

如果您想了解更多相关信息，这里有一个很好的示例https://angular.io/guide/form-validation ，页面上的禁止名称验证器。