mat-form-field angular material 内的多个输入答案

【问题标题】：more than one input inside mat-form-field angular materialmat-form-field angular material 内的多个输入
【发布时间】：2019-08-16 02:54:16
【问题描述】：

我想要实现的可以在下图中看到。

或堆栈闪电战

https://angular6-material-components-demo-etqohr.stackblitz.io/

我正在使用角度材质作为 UI 框架

问题是当我单击任意位置（日、月或年）时，焦点会自动放在第一个输入上。我无法在文档中找到如何禁用此行为。

另一个问题是验证，整个字段的验证只会考虑第一个字段。感觉这不受角材料的支持。关于如何解决这个问题的任何想法？

模板标记：

<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 angular-material

【解决方案1】：

为了改变角材质组件的默认行为，最佳实践是扩展它并创建自己的自定义类。

对于 mat-form-field 组件，Angular Material 的网站上有一个指南，它与您想要做的非常接近。建议你去看看，这里是链接；

https://material.angular.io/guide/creating-a-custom-form-field-control

链接中的示例还将输入分为 3 个部分，您可以集中其中任何一个。

【讨论】：