более одного входа внутри углового материала мат-формы-поля

Question

того, чего я хочу достичь, можно увидеть на картинке ниже.

или стекаблиц

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

Я использую угловой материал в качестве основы пользовательского интерфейса

Проблема в том, что когда я щелкаю в любом месте (день, месяц или год), фокус автоматически помещается на первый вход. Я не смог найти в документации, как отключить это поведение.

И еще одна проблема связана с проверкой: проверка всего поля будет учитывать только первое поле. Такое ощущение, что это не поддерживается угловым материалом. Любые идеи о том, как решить эту проблему?

шаблон разметки:

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

Answer 1

Чтобы изменить стандартное поведение углового компонента материала, рекомендуется расширить его и создать собственный класс.

Для компонента mat-form-field естьруководство на веб-сайте Angular Material, который настолько близок к тому, что вы пытаетесь сделать.Я предлагаю вам проверить это, вот ссылка;

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

Пример в ссылке также делит вход на 3 части, и вы можете сфокусировать любую из них.