開始日と終了日を角度で検証する方法は？

Question

私は開始日を終了日よりも長くしたいという角度のコンポーネントを作成しています。 HTMLコードとTSコードを変更する必要があるのですか？私が使用しているHTML及びTSコードの抜粋である：

HTML：

<form class="unavailability-form" [formGroup]="unavailabilityForm" *ngIf="loaded"> 
<div class="component-title" matDialogTitle> 
    {{'PORTAL.TEXTUNAVAILABILITY' | translate}} 
</div> 
<mat-toolbar> 
    <div class="container" 
     fxLayout="row" 
     fxLayout.xs="column" 
     fxLayoutGap.xs="0"> 
     <div> 
     <h1>{{componentTitle}}</h1> 
     </div> 
    </div> 
</mat-toolbar> 
<mat-dialog-content> 
    <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0" fxLayoutGap="10px"> 
     <div class="item item-1" fxFlex="50%" fxFlexOrder="1"> 
     <mat-form-field> 
      <input matInput [matDatepicker]="picker" placeholder="{{'PORTALSTARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="availability.startDate" [readonly]="!componentPermission.writePermission"> 
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> 
      <mat-datepicker #picker></mat-datepicker> 
     </mat-form-field> 
     </div> 
     <div class="item item-2" fxFlex="50%" fxFlexOrder="1"> 
     <mat-form-field> 
      <input matInput [matDatepicker]="picker" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="availability.endDate" [readonly]="!componentPermission.writePermission"> 
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> 
      <mat-datepicker #picker></mat-datepicker> 
     </mat-form-field> 
     </div> 
    </div> 
    <div class="item item-1" fxFlex="50%" fxFlexOrder="1"> 
     <mat-form-field> 
     <input matInput placeholder="{{'PORTAL.UNAVAILABILITYREASON' | translate}}" type="text" formControlName="unavailabilityReason" [(ngModel)]="availability.unavailabilityReason" [readonly]="!componentPermission.writePermission"> 
     </mat-form-field> 
    </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]="!locationForm.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> 

TS：上記のコードで

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

、{{PORTAL .___}}テキストを指しますデータベースからの値

Answer 1

フォーム内にngModelを使用することはできません。コンポーネントからデータをフォームにフィードする必要があります。

<mat-dialog-content> 
    <form [formGroup]="unavailabilityForm " novalidate fxFlex> 
     <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0" fxLayoutGap="10px"> 
     <div class="item item-1" fxFlex="50%" fxFlexOrder="1"> 
      <mat-form-field> 
       <input matInput [matDatepicker]="picker" placeholder="{{'PORTALSTARTDATE' | translate}}" type="text" formControlName="startDate" [readonly]="!componentPermission.writePermission"> 
       <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> 
       <mat-datepicker #picker></mat-datepicker> 
      </mat-form-field> 
     </div> 
     <div class="item item-2" fxFlex="50%" fxFlexOrder="1"> 
      <mat-form-field> 
       <input matInput [matDatepicker]="picker" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [readonly]="!componentPermission.writePermission"> 
       <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> 
       <mat-datepicker #picker></mat-datepicker> 
      </mat-form-field> 
     </div> 
     </div> 
     <div class="item item-1" fxFlex="50%" fxFlexOrder="1"> 
     <mat-form-field> 
      <input matInput placeholder="{{'PORTAL.UNAVAILABILITYREASON' | translate}}" type="text" formControlName="unavailabilityReason" [readonly]="!componentPermission.writePermission"> 
     </mat-form-field> 
     </div> 
    </form> 
</mat-dialog-content> 

は、その後、フォームを初期化し、あなたのグループにFormGroupレベルのバリデータを追加する必要があります。ここで削除ngModelを持つフォームです。また、私は自分のフォームにデータをフィード：FormGroupで

initForm() { 
    this.unavailabilityForm = this.formBuilder.group({ 
     'startDate': [availability.startDate], 
     'endDate': [availability.endDate], 
     'unavailabilityReason': [availability.unavailabilityReason] 
    }, validateDate); 
    } 

カスタムバリデータ機能がvalidateDateになります。

カスタム検証関数は次のようにする必要があります：あなたはすべてのコントロールにアクセスすることができFormGroupレベルでのカスタムバリデータで

function validateDate(group: FormGroup) { 
    ///TODO: Implement some better validation logic 
    const invalid = group.get('startDate').value > group.get('endDate').value; 

    ///TODO: Implement some logic to mark controls dirty if is necessary. 

    return invalid ? { 'invalidDate': true } : null; 
} 

は、グループや検証を行うことを形成します。あなたのフォームの値は文字列なので、Dateで作業している場合は、日付を比較するためのより良いロジックが必要になります。

また、グループレベルのバリデーターには検証フィードバックが表示されない場合があるため、手動でコントロールを必要に応じてダーティにする必要があります。