Si el formato de email
no es válido, muestro el error y el boton del submit
del formulario queda inhabilitado. El problema esta que cuando empiezo a borrar el email
mal escrito en el input
, el botón submit
se habilita, de esta forma se podría enviar un email incorrecto al hacer submit. Cómo puedo evitar esto?
Aca el componente.ts
form: FormGroup;
password2 = '';
user = {} as User;
constructor(
private formBuilder: FormBuilder,
public myValidationsService: MyValidationsService,
public authService: AuthService,
private router: Router
) {
this.buildForm();
}
buildForm() {
this.form = this.formBuilder.group({
email: ['', [Validators.required, Validators.maxLength(80), Validators.email]],
username: ['', [Validators.required, Validators.maxLength(50)]],
password: ['', [Validators.required, Validators.maxLength(80)]],
password2: ['', [Validators.required], {validator: this.checkPasswords }]
});
}
deleteWhiteSpace(cadena: string) {
// return cadena.replace(/\s{2,}/g, ' ').trim();
const a = this.myValidationsService.deleteWhiteSpice(cadena);
return a;
}
signUp(event: Event){
event.preventDefault();
if(this.form.valid){
//this.user = this.form.value;
this.user.registrationDate = this.currentDate;
console.log(this.user);
}
}
checkPasswords(group: FormGroup) {
let pass = group.get('password').value;
let confirmPass = group.get('password2').value;
return pass === confirmPass ? null : { notSame: true }
}
Aca el component.html
con el formulario.
<form [formGroup]="form" (ngSubmit)="signUp($event)">
<div class="form-group mb-3">
<label>Email</label>
<input type="email" class="form-control" formControlName="email" [(ngModel)]="user.email" placeholder="Email">
<div *ngIf="form.get('email').errors && form.get('email').dirty">
<p class="text-danger" *ngIf="form.hasError('email', 'email') && form.get('email').touched">
Ingrese un formato de email correcto.
</p>
<p class="text-danger" *ngIf="form.get('email').hasError('required')">
Este campo es obligatorio!
</p>
<p class="text-danger" *ngIf="form.get('email').hasError('maxlength')">
El email es muy largo!
</p>
</div>
</div>
<div class="form-group mb-3">
<label>Nombre de usuario</label>
<input type="text" class="form-control" formControlName="username" [(ngModel)]="user.username"
placeholder="Nombre de usuario" (blur)="user.username = deleteWhiteSpace(user.username)">
<div *ngIf="form.get('username').errors && form.get('username').dirty">
<p class="text-danger" *ngIf="form.get('username').hasError('required')">
Este campo es obligatorio!
</p>
<p class="text-danger" *ngIf="form.get('username').hasError('maxlength')">
El nombre de usuario es muy largo!
</p>
</div>
</div>
<div class="form-group mb-3">
<label>Contraseña</label>
<input type="password" class="form-control" formControlName="password" [(ngModel)]="user.pass"
placeholder="Contraseña" (blur)="user.pass = deleteWhiteSpace(user.pass)">
<div *ngIf="form.get('password').errors && form.get('password').dirty">
<p class="text-danger" *ngIf="form.get('password').hasError('required')">
Este campo es obligatorio!
</p>
<p class="text-danger mt-1" *ngIf="form.get('password').hasError('maxlength')">
la contraseña es muy larga!
</p>
</div>
</div>
<div class="form-group mb-3">
<label>Confirmar contraseña</label>
<input type="password" class="form-control" formControlName="password2" [(ngModel)]="password2"
placeholder="Confirmar contraseña" (blur)="password2 = deleteWhiteSpace(password2)">
<div *ngIf="form.get('password2').errors && form.get('password2').dirty">
<p class="text-danger" *ngIf="form.get('password2').hasError('required')">
Este campo es obligatorio!
</p>
<p class="text-danger" *ngIf="form.get('password2').hasError('maxlength')">
la contraseña es muy larga!
</p>
</div>
</div>
<div class="text-center">
<button [disabled]="form.invalid" type="submit" mat-raised-button color="warn"
class="btn-block">Registrarse</button>
</div>
</form>
my-validations.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MyValidationsService {
constructor() { }
deleteWhiteSpice(str: string){
const word = str.split(/\s/).join('');
return word;
}
}
MyValidationsService
y no tenemos la funcióncheckPasswords
). Por otro lado, no me parece una buena idea usar a la vez un formulario reactivo yngModel
con el objetouser
: stackoverflow.com/questions/45815176/…