//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.