Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Algumas validações não estão funcionando

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)]]
        });
    }
}
2 respostas
solução!

acho que o erro está na forma como está escrito o "length" nos comandos... vc escreveu lenght. Já fiz isso várias vezes ;)

Funcionouu