Componente mat-datepicker

Front-end
#1

TypeScript da mascara

mascaraData = () => {
    return [
      /[0-9]/,
      /[0-9]/,
      '/',
      /[0-9]/,
      /[0-9]/,
      '/',
      /[0-9]/,
      /[0-9]/,
      /[0-9]/,
      /[0-9]/,
    ];
  };

<div>
      <mat-form-field appearance="outline" class="componentes">
        <input
          placeholder="Data do pedido"
          required
          matInput
          formControlName="data"
          [matDatepicker]="dataBotao"
          [textMask]="{ mask: mascaraData }"
        />
        <mat-datepicker-toggle
          matSuffix
          [for]="dataBotao"
        ></mat-datepicker-toggle>
        <mat-datepicker #dataBotao></mat-datepicker>
      </mat-form-field>
    </div>

Se digito, existe o valor em
this.formGroup.controls.data.value
Se escolho pelo componente, o valor é null

Como ajustar este erro ?

#2

Apenas como teste, use ngModel (remova o formControlName) nesse campo para ver se o valor é atribuido corretamente. Se necessário, coloque para fora do form e faça imprimir o valor da variável em algum lugar da tela.