我想要实现的可以在下图中看到。
或堆栈 Blitz
https://angular6-material-components-demo-etqohr.stackblitz.io/
我正在使用 Angular Material 作为 UI 框架
问题是当我点击任何地方(日、月或年)时,焦点会自动放在第一个输入上。我无法在文档中找到如何禁用此行为。
另一个问题是验证,整个字段的验证只会考虑第一个字段。感觉这是 Angular 材不支持的。关于如何解决这个问题的任何想法?
模板标记:
<mat-form-field class="full-width">
<mat-label>{{label}}</mat-label>
<div class="d-flex justify-content-between">
<div>
<input matInput name="day" #day="ngModel" [(ngModel)]="dateOfBirthDay" type="tel" inputmode="numeric"
autocomplete="nope" placeholder="24" required maxlength="2" (keypress)="validate($event)">
</div>
<div>
<input matInput name="month" [(ngModel)]="dateOfBirthMonth" type="tel" inputmode="numeric" autocomplete="nope"
placeholder="12" required maxlength="2" (keypress)="validate($event)">
</div>
<div>
<input matInput name="year" [(ngModel)]="dateOfBirthYear" type="tel" inputmode="numeric" autocomplete="nope"
[placeholder]="placeholderYear" required maxlength="4" (keypress)="validate($event)">
</div>
</div>
<mat-error>
{{_errorMessage}}
</mat-error>
</mat-form-field>
最佳答案
为了改变 Angular Material 组件的默认行为,最佳做法是扩展它并制作您自己的自定义类。
对于 mat-form-field 组件,Angular Material 的网站上有一个指南,它与您尝试做的非常接近。我建议您检查一下,这是链接;
https://material.angular.io/guide/creating-a-custom-form-field-control
链接中的示例还将输入分为 3 个部分,您可以关注其中任何一个。
关于angular - mat-form-field Angular Material 中有多个输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55345029/