How to validate field with input type=time via for

Question

Field with input type=time can't validate via form control. I get error:

ERROR Error: No value accessor for form control with name: 'thirdCtrl'

Part of code, which don't handle via Vaildator

 <mat-step [stepControl]="thirdFormGroup">
    <form [formGroup]="thirdFormGroup">    
<mat-form-field formControlName="thirdCtrl">
    <input matInput type="time">
    </mat-form-field>
      <button mat-button matStepperNext>Next</button>
    </form>
  </mat-step>

Simple FormGroup for above form

this.thirdFormGroup = this._formBuilder.group({
      thirdCtrl: ['', Validators.required]
    });

I suspect error occurs because FormControl try to handle input field with type time, but I don't know how to change this FormControl for my case.

Answer 1

<mat-step [stepControl]="thirdFormGroup">
    <form [formGroup]="thirdFormGroup">    
<mat-form-field>
    <input matInput type="time" formControlName="thirdCtrl">
    </mat-form-field>
      <button mat-button matStepperNext>Next</button>
    </form>
  </mat-step>

Answer 2

Try to move formControlName="thirdCtrl" binding from <mat-form-field> to <input>, like:

<mat-step [stepControl]="thirdFormGroup">
    <form [formGroup]="thirdFormGroup">    
       <mat-form-field>
          <input matInput type="time" formControlName="thirdCtrl">
       </mat-form-field>
      <button mat-button matStepperNext>Next</button>
    </form>
</mat-step>