Angular material datepicker:如何为无效和必需的输入获取两个不同的验证错误
Angular material datepicker:如何为无效和必需的输入获取两个不同的验证错误
提问于 2019-10-18 20:08:14
我想根据空值和无效的日期格式验证角度材料日期拾取器输入，但有两个单独的错误消息，一个在空值的情况下，另一个在无效输入的情况下。
我的html：
<mat-form-field appearance="outline">
<mat-label>Data di nascita*</mat-label>
<input matInput [matDatepicker]="picker"
formControlName="birthday">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-
toggle>
<mat-datepicker touchUi #picker></mat-datepicker>
<mat-error
*ngIf="newCat.controls['birthday'].hasError('required')">Campo
obbligatorio</mat-error>
<mat-error *ngIf="newCat.controls['birthday'].invalid">Formato di
data errato</mat-error>
</mat-form-field>我的ts：
this.newCat = this.formBuilder.group({
name: ['', Validators.required],
birthday: ['', Validators.required],
});在我的例子中，当输入为emty或日期无效时，我会将两个消息进行比较，并同时获得"Campo obbligatorio“和"Formato di data errato”。
Stack Overflow用户
发布于 2019-10-18 20:20:57
有两个选项：
将Datepicker的matinput设置为只读，然后在TS或HTML代码中设置DatePicker的有效日期格式：
<input matInput [matDatepicker]="picker" formControlName="birthday" readonly>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi #picker></mat-datepicker>将第二个Mat-Error标记更改为：
<mat-error *ngIf="!newCat.controls['birthday'].hasError('required') && newCat.controls['birthday'].invalid">
Formato di data errato
</mat-error>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58450632
复制相关文章
相似问题
腾讯云开发者
