角度材料数据选择器控制

时间:2018-01-30 07:24:23

标签: angular validation datepicker

我有两个mat dat选择器输入日期,日期发布应该不如date_saisie。我如何使用min max of dat picker或自定义验证器来解决这个问题? 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>

1 个答案:

答案 0 :(得分: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>
....