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

Posted 2023-03-13

【中文标题】每当用户选择错误的角度输入时，向用户显示错误消息？

【英文标题】：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 我想我已经用我自己的验证器检查错误了吗？我确实有自己的验证器来检查错误，但令人困惑的是如何向用户显示错误？

【参考方案1】：

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

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

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