hola buenas tengo un problema estoy trabajando con angular material pero a la hora de la interpolacion, mi formcontrol apesar de que esta lleno muestra el error Validators.required de los form.. aqui muestro una parte del codigo

html

    <mat-form-field>
      <input matInput placeholder="Nombre"  maxlength="20" 
       [formControl]="nombreControl" [value]="nombre">
             <mat-error *ngIf="nombreControl.hasError('required')">
                  El nombre es <strong>Requerido</strong>
             </mat-error>
     </mat-form-field>

mi component.ts

    export class UsuarioPerfilComponent implements OnInit {
      nombre='Marwin';
     
     nombreControl = new FormControl('', [
     Validators.required, 
     ]);

el resultado es este al darle click al form

[![][1]][1]


  [1]: https://i.sstatic.net/Ky6b7.png