1

Tengo un problema estoy trabajando con angular material pero a la hora de la interpolacion, mi formcontrol a pesar de que esta lleno muestra el error Validators.required de los form... Aquí muestro una parte del código

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

1

El problema es que estas utilizando un property binding. Eso solo crea la relación en un solo sentido. Para tu código el contenido del input (y por decantamiento, tu formulario) esta vació.

Existen 2 formas para hacer lo que necesitas:

1) Usando ngModel:

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

De esta manera vinculas en ambos sentidos, si la variable se modifica se modifica el input, y si se modifica el input se modifica la variable

2) Ya que estas usando reactive forms, olvidate de la variable nombre, y coloca el valor por defecto al crear el formControl:

nombreControl = new FormControl('Marwin', [
    Validators.required, 
  ]);

Luego podes modificar el valor con:

this.nombreControl.setValue('EL_NUEVO_NOMBRE');

y podes leer el valor con:

this.nombreControl.value

Personalmente te recomiendo la opción 2 ya que de la otra forma estarías haciendo un bindeo innecesario (Salvo que necesites que el valor este también en esa variable por algún otro motivo).

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.