每当用户选择错误的角度输入时，向用户显示错误消息？答案

【问题标题】：Show users an error message whenever they select wrong input in angular?每当用户选择错误的角度输入时，向用户显示错误消息？
【发布时间】：2018-05-07 04:07:18
【问题描述】：

我正在用 Angular 构建一个组件（html、css、spec.ts、ts），我一直想要 endDate > startDate，所以我添加了验证器来执行此检查。下面是我的 HTML 表单：

<form class="unavailability-form" [formGroup]="unavailabilityForm" *ngIf="loaded">
  <mat-dialog-content>
    <div class="container"  fxLayout.xs="column" fxLayoutGap.xs="0" fxLayoutGap="10px">
      <div class="start-date" fxFlex="50%" fxFlexOrder="1">
        <mat-form-field>
          <input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
          <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
          <mat-datepicker #picker1></mat-datepicker>
        </mat-form-field>
      </div>
      <div class="end-date" fxFlex="50%" fxFlexOrder="2">
        <mat-form-field>
          <input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
          <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
          <mat-datepicker #picker2></mat-datepicker>
        </mat-form-field>
      </div>
    </div>
    <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0" fxLayoutGap="10px">
      <div class="unavailability-reason" >
        <mat-form-field>
          <input matInput placeholder="{{'PORTAL.UNAVAILABILITYREASON' | translate}}" type="text" formControlName="unavailabilityReason" [(ngModel)]="unavailability.unavailabilityReason" [readonly]="!componentPermission.writePermission">
        </mat-form-field>
      </div>
    </div>
  </mat-dialog-content>
  <mat-dialog-actions>
    <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0">
      <div class="item item-1" fxFlex="100%">
        <button mat-raised-button color="primary" [disabled]="!unavailabilityForm.valid || !componentPermission.writePermission" (click)="onSave()">{{'PORTAL.CONFIRM' | translate}}</button>
        <!--<button mat-raised-button [matDialogClose]="canceled" color="primary">{{'PORTAL.CANCEL' | translate}}</button>-->
      </div>
    </div>
  </mat-dialog-actions>
</form>

下面是我的角度代码，我还添加了验证器，如下所示。我想在用户选择endDate 小于startDate 时向他们显示错误消息。我怎样才能用我的代码在角度上做到这一点？我无法弄清楚这一点。

ngOnInit() {
    this.getParams();
    this.getPermissions();
    this.validateForm();
}

validateForm() {
    this.unavailabilityForm = this.formBuilder.group({
      'startDate': ['', Validators.required],
      'endDate': ['', Validators.required],
      'unavailabilityReason': ['']
    }, { validator: this.dateLessThan('startDate', 'endDate') });
  }

  dateLessThan(from: string, to: string) {
    return (group: FormGroup): { [key: string]: any } => {
      let f = group.controls[from];
      let t = group.controls[to];
      if (f.value > t.value) {
        return {
          dates: "Date from should be less than Date to"
        };
      }
      return {};
    }
  }

【问题讨论】：

一种方法是在 ngModelChange 上调用一个函数来检查开始日期和结束日期，然后显示错误。
@tumulr 我想我已经用我自己的验证器检查错误了吗？我确实有自己的验证器来检查错误，但令人困惑的是如何向用户显示错误？

标签： angular angular-material angular2-forms angular-material2 angular2-formbuilder

【解决方案1】：

在组件的 HTML 模板中，将消息预设在 div 中：

<div [hidden]="dates_valid" class="invalid_date">
  Date from should be less than Date to
</div>

管理dates_valid boolean 在组件中隐藏或显示它。

【讨论】：