0

//Hola gente, tengo una gran duda sobre este tema de los formularios reactivos en angular, primero que nada les muestro mi components.ts

export class LobbyComponent implements OnInit {

  public form:FormGroup

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      nombre: ['', Validators.required],
      apellido: ['', Validators.required],
      email: ['', Validators.required, Validators.email],
      birth: ['', Validators.required],
      usuario: ['', Validators.required],
      password:['', Validators.required],
      repPassword: ['', Validators.required],
      sexo: ['', Validators.required]
    });

   }
  ngOnInit() {
  }

   sexs = [
    {value: 'hombre', viewValue: 'Hombre'},
    {value: 'mujer', viewValue: 'Mujer'},
    {value: 'indefinido', viewValue: 'Prefiero no decirlo'}
  ];

  submitRegister(){
        console.log(this.form.valid)
  }
}

y a continuacion el cmponent.html

<form [formGroup]="form" (ngSubmit)="submitRegister()">
  <mat-form-field class="input-form-register">
    <mat-label>Nombre</mat-label>
    <input matInput type="text" name="nombre" formControlName="nombre" />
  </mat-form-field><mat-form-field class="input-form-register">
    <mat-label>Apellido</mat-label>
    <input matInput type="text" name="apellido" formControlName="apellido" >
  </mat-form-field>
  <mat-form-field class="input-form-register">
    <mat-label>Usuario</mat-label>
    <input matInput type="text" name="usuario" formControlName="usuario">
  </mat-form-field>
  <mat-form-field class="input-form-register">
    <mat-label>Email</mat-label>
    <input matInput type="email" name="email" formControlName="email">
  </mat-form-field>
  <mat-form-field class="input-form-register">
    <mat-label>Fecha de nacimiento</mat-label>
    <input matInput [matDatepicker]="picker" formControlName="birth">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-form-field class="input-form-register">
    <mat-label>Sexo</mat-label>
    <mat-select formControlName="sexo">
      <mat-option *ngFor="let sex of sexs" [value]="sex.value" >
        {{sex.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field class="input-form-register">
    <mat-label>Contraseña</mat-label>
    <input matInput type="password" autocomplete="new-password" formControlName="password"/>
  </mat-form-field>
  <mat-form-field class="input-form-register">
    <mat-label>Confirme su contraseña</mat-label>
    <input matInput type="password" autocomplete="new-password" formControlName="repPassword"/>
  </mat-form-field>
  <button mat-raised-button class="btn-block w-50" color="primary">Registrarme</button>
  <div>
    <small>Al registrarse usted estara aceptando nuestras <a href="">Condiciones y servicios</a></small>
  </div>
</form>

//Bien ahora si les voy a contar mis dudas, mi error y cual es el resultado que busco, primero y principal estoy tratando de validar dicho formulario, todo esta ok para mi, tengan en cuenta que no soy de desarrollar interfaces y logicas y esas cosas que se ejecutan en un browser, a la hora de validar el formulario, tengo entendido que si this.form.valid me devuelve true es por que todo esta ok, lo que pasa es que cuando lo muestro por consola siempre me devuelve false, y esta es mi duda, me tiene que devolver true? me tengo que guiar por ese valid a la hora de saber si esta todo ok o no? y por ultimo, en los campos del formBuilder, a la hora de agregar varias validaciones como es la manera de hacerlo?

les agradesco su atencion y su ayuda.

1 respuesta 1

-1

Buen dia. En tu funcion submitRegister(), coloca console.log(this.form), para asi veas el status de tu formulario, veo que esta en PENDING, el tema es que en tu email,le has puesto email: ['', Validators.required, Validators.email], pero recuerda que en las validaciones el segundo 'argumento' son un arreglo si en caso hay mas de una validacion, en este caso : email:['',[Validators.required, Validators.email]].

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.