Angular 材质 Datepicker 控件答案

【问题标题】：Angular material Dat picker controlAngular 材质 Datepicker 控件
【发布时间】：2018-01-30 07:24:23
【问题描述】：

我有两个 mat dat 选择器输入日期，日期发布应该不如 date_saisie。我该如何解决这个问题，使用 dat 选择器或自定义验证器的最小最大值？ anu 建议会有所帮助

                <div class="row">
                    <div class="col-md-3">
                            <div class="form-group form-black label-floating is-empty">
                                    <label class="control-label"> Date saisie</label>
                                <mat-form-field >
                                    <input matInput [matDatepicker]="lpicker"  formControlName="date_saisie" id="date_saisie">
                                    <mat-datepicker-toggle matSuffix [for]="lpicker"></mat-datepicker-toggle>
                                    <mat-datepicker #lpicker></mat-datepicker>
                                </mat-form-field>

                            </div> 
                            <div *ngIf="aoForm.controls['date_saisie'].hasError('required') && aoForm.controls['date_saisie'].touched ">
                                please enter a date saisie
                            </div>   
                    </div>
                    <div class="col-md-3">
                        <div class="form-group form-black label-floating is-empty">
                                <label class="control-label"> Date publication</label>
                                <mat-form-field >
                                    <input matInput [matDatepicker]="ppicker"  formControlName="date_publication" date-compare="date_saisie" id="date_publication">
                                    <mat-datepicker-toggle matSuffix [for]="ppicker"></mat-datepicker-toggle>
                                    <mat-datepicker #ppicker></mat-datepicker>
                                </mat-form-field>
                        </div>
                        <div *ngIf="aoForm.controls['date_publication'].hasError('required') && aoForm.controls['date_publication'].touched ">
                            please enter a date publication
                        </div>

                    </div>

【问题讨论】：

标签： angular validation datepicker

【解决方案1】：

您应该在 matDatepicker 指令上使用 [min/max] 输入。

例如，如果您想强制 date_publication 晚于 date_saisie

....
    <mat-form-field >
        <input matInput [min]="aoForm.values.date_saisie" [matDatepicker]="ppicker"  formControlName="date_publication" date-compare="date_saisie" id="date_publication">
        <mat-datepicker-toggle matSuffix [for]="ppicker"></mat-datepicker-toggle>
....

【讨论】：