Algumas das validações não estão funcionando corretamente:
- Não verifica o minLenght em nenhum dos campos;
- Não verifica o maxLenght em nenhum dos campos;
- Não verifica se o usuário começa com números;
Basicamente o campo de email funciona corretamente e de resto, a única validação feita nos outros é se está vazio. A presença de letras maiúsculas no campo de usuário também funciona, apenas a restrição de não poder iniciar com números que não é validada...
HTML:
<h4 class="text-center"> Register to embrace a new world!</h4>
<form [formGroup]="signupForm" class="form mt-4">
<div class="form-group">
<input formControlName="email" placeholder="email" class="form-control" autofocus >
<ap-vmessage *ngIf="signupForm.get('email').errors?.required" text="Email is required!"></ap-vmessage>
<ap-vmessage *ngIf="signupForm.get('email').errors?.email" text="Invalid Email!"></ap-vmessage>
</div>
<div class="form-group">
<input formControlName="fullName" placeholder="full name" class="form-control">
<ap-vmessage *ngIf="signupForm.get('fullName').errors?.required" text="Full name is required!"></ap-vmessage>
<ap-vmessage *ngIf="signupForm.get('fullName').errors?.minlenght" text="Minimum lenght is 2!"></ap-vmessage>
<ap-vmessage *ngIf="signupForm.get('fullName').errors?.maxlenght" text="Maximum lenght is 40!"></ap-vmessage>
</div>
<div class="form-group">
<input formControlName="userName" placeholder="user name" class="form-control">
<ap-vmessage *ngIf="signupForm.get('userName').errors?.required" text="Username is required!"></ap-vmessage>
<ap-vmessage *ngIf="signupForm.get('userName').errors?.minlenght" text="Minimum lenght is 2!"></ap-vmessage>
<ap-vmessage *ngIf="signupForm.get('userName').errors?.maxlenght" text="Maximum lenght is 30!"></ap-vmessage>
<ap-vmessage *ngIf="signupForm.get('userName').errors?.pattern" text="Must be lowercase and cannot start with numbers!"></ap-vmessage>
</div>
<div class="form-group">
<input formControlName="password" placeholder="password" class="form-control" type="password" >
<ap-vmessage *ngIf="signupForm.get('password').errors?.required" text="Password is required!"></ap-vmessage>
<ap-vmessage *ngIf="signupForm.get('password').errors?.minlenght" text="Minimum lenght is 8!"></ap-vmessage>
<ap-vmessage *ngIf="signupForm.get('password').errors?.maxlenght" text="Maximum lenght is 14!"></ap-vmessage>
</div>
<button class="btn btn-primary btn-block">Register</button>
<p>Already a user?<a [routerLink]="['']"> Sign In!</a></p>
</form>
COMPONENTE
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
templateUrl: './signup.component.html'
})
export class SignupComponent implements OnInit{
signupForm: FormGroup;
constructor(private formBuilder: FormBuilder){}
ngOnInit(): void {
this.signupForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.email]],
fullName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(40)]],
userName: ['', [Validators.required, Validators.pattern(/^[a-z0-9_\-]+$/), Validators.minLength(2), Validators.maxLength(30)]],
password: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(14)]]
});
}
}