endDateに>たstartDate

Question

私はいつもendDate > startDateを先の角度でコンポーネント（html、css、spec.ts、ts）を構築しています。私は複数のdatepickersを作るためにこのリンクhttps://material.angular.io/components/datepicker/overviewに従った。

これは、私がstartDateとendDateに使用したhtmlです。

たstartDate：

<div class="item item-1" 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> 

endDateに：

<div class="item item-2" 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> 

Iはtsで使用しているvalidateForm()コードである：

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

    }); 
    } 

私はvalidateForm()コードでいくつかの変更を加えなければならないと確信していますが、私は何を変更しなければならないのか分かりません。

Answer 1

リアクティブフォームとテンプレート駆動型が混在しているように見えるので、反応型を完全に選択します。バリデーションの実装も私の考えではより簡単でクリーンです。これはまた、予期しない問題が2つのバインディング（フォームコントロールとngModel）を持つ可能性があるため、ngModelをすべて削除することを強くお勧めします。

フォームを作成し、カスタムバリデーターを添付します。大きなフォームがある場合は、カスタムバリデーターを日付のネストされたグループにアタッチします。この例では、バリデーターはフォームに変更があるたびに起動します。日付であれば問題ありませんフィールド、またはその他のフィールドに入力します。

constructor(private formBuilder: FormBuilder) { 
    this.unavailabilityForm = this.formBuilder.group({ 
    'startDate': [''], 
    'endDate': [''] 
    }, {validator: this.checkDates}); 
} 

あなたは後の段階で変数unavailabilityのためのあなたの値を取得している場合、あなたは、フォームコントロールに値を割り当てるためにpatchValueまたはsetValueを使用することができます。

this.unavailabilityForm.setValue({ 
    startDate: this.unavailability.startDate; 
    endDate: this.unavailability.endDate; 
}) 

カスタムバリデータだけでチェック終了日が開始日より後の日付で、有効な場合はnullを返します。またはカスタム検証エラーが発生した場合：

checkDates(group: FormGroup) { 
    if(group.controls.endDate.value < group.controls.startDate.value) { 
    return { notValid:true } 
    } 
    return null; 
} 

、その後、あなたがテンプレートでこのカスタムエラーを表示することができます。

<small *ngIf="unavailabilityForm.hasError('notValid')">Not valid</small> 

また、あなたのformタグでこのformgroupをマークすることを忘れないでください：

<form [formGroup]="unavailabilityForm"> 

ここにあなたのためDEMOです:)