間違った入力を角度で選択するとエラーメッセージを表示しますか？

Question

私はいつもendDate > startDateが必要な角度でコンポーネント（html、css、spec.ts、ts）を構築していますので、このチェックを行うためにバリデーターを追加しました。以下はそのための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未満に設定するとエラーメッセージが表示されます。私はどのように私のコードと角度をつけてそれを行うことができますか？私はこれを理解することができません。あなたのコンポーネントのHTMLテンプレートで

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 {}; 
    } 
    } 

Answer 1

、divの内側にメッセージをプリセット：

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

は、コンポーネントにそれを隠すか表示するdates_validブール値を管理します。