CODEWITHSUNDEEP
angularangular-material
vmachacek
vmachacek

Reputation: 585

more than one input inside mat-form-field angular material

what I want to achieve can be seen in the below picture.

enter image description here

or stackblitz

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

I'm using angular material as a UI framework

Problem is when I click anywhere (day, month or a year) the focus is automatically placed on the first input. I was not able to find in the documentation how to disable this behavior.

And another issue is with the validation, the validation for the whole field would only take into account first field. It feels like this is not supported by angular material. Any ideas on how to solve this?

template markup:

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

Upvotes: 3

Views: 8722

Answers (1)

CeritT
CeritT

Reputation: 532

In order to change default behavior of an angular material component, the best practice is to extend it and make your own custom class.

For mat-form-field component there's a guide in Angular Material's website that is so close what you are trying to do. I suggest you to check it out, here is the link;

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

The example in the link also divides an input to 3 parts and you can focus any of them.

Upvotes: 6

Related Questions