如何使用日期选择器作为表单的输入 - angular

Question

I have a form with some mat-form-field, it is supposed to have together with others two inputs as date picker

    this.templateForm = this._formBuilder.group({
      arrivalDate: new FormControl('', Validators.required),
      executionDate: new FormControl('', Validators.required),
      unit: new FormControl(),
      user: new FormControl(),
    })

my html is something like that

<form name="templateForm" [formGroup]="templateForm">
         <mat-form-field formControlName="arrivalDate">
            <app-date-picker></app-date-picker>
         </mat-form-field>
          <mat-form-field formControlName="executionDate">
            <app-date-picker></app-date-picker>
         </mat-form-field>
         <mat-form-field appearance="outline">
            <mat-label> Unit</mat-label>
            <mat-select formControlName="unit">
              <mat-option *ngFor="let unit of units" [value]="unit">{{ unit.name }}</mat-option>
            </mat-select>
          </mat-form-field>
         
          <mat-form-field appearance="outline">
            <mat-label> Users</mat-label>
            <mat-select formControlName="user" multiple 
              (selectionChange)="changeSelectedUsers($event.value)">
              <mat-option *ngFor="let user of usersSub$ | async; let id = index" [value]="user">{{ 
              user.givenName }}</mat-option>
            </mat-select>
          </mat-form-field>
</form>

I'm getting this error

ERROR Error: mat-form-field must contain a MatFormFieldControl.

My question is how to use a customized date picker component inside a form?

Answer 1

It seems like the "formControlName" is not in the correct place but I still don't see where should I put it