0

el tema es el siguiente... tengo un pequeño formulario reactivo trabajado con Angular 14 y Bootstrap 5, el problema se da con las validaciones, ya que algunas no se logran visualizar en el template (antes si lo hacían, no se si luego toqué algo en el código)...

Código HTML

<form [formGroup]="form" class="container-lg"  (ngSubmit)="onSend($event)" novalidate>
  <div class="m-5">
    <h1>Iniciar Sesion</h1>
    <div class="mb-3">
      <label for="exampleInputEmail1" class="form-label">Email</label>
      <input type="email"  [ngClass]="{'is-invalid ': Email?.errors && Email?.touched , 'is-valid ': !Email?.errors && !Email?.touched }" placeholder="ejemplo: [email protected]" class="form-control" formControlName="email" id="exampleInputEmail1" aria-describedby="emailHelp">
    </div>
    <div class="emailError" *ngIf="Email?.touched && Email?.errors">
      <p *ngIf="Email?.hasError('touched')" class="text-danger">El email es requerido.</p>
      <p *ngIf="Email?.hasError('touched')" class="text-danger">El formato del email debe ser válido.</p>
    </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">Contraseña</label>
      <input type="password" class="form-control" [ngClass]="{'is-invalid': Password?.touched && Password?.errors, 'is-valid ': !Password?.errors && !Password?.touched }"  formControlName="password" id="exampleInputPassword1">
    </div>
    <div class="passwordError" *ngIf="Password?.errors && Password?.touched">
      <p *ngIf="Password?.hasError('touched')" class="text-danger">Debe introducir una contraseña.</p>
      <p *ngIf="Password?.hasError('minlength')" class="text-danger">La contraseña debe tener como mínimo 8 caracteres.</p>
      <p *ngIf="Password?.hasError('maxlength')" class="text-danger">La contraseña debe tener máximo 24 caracteres </p>
    </div>
    <button type="submit" class="btn" [disabled]="form.invalid" >Enviar</button>
      <small class="text-danger"  *ngIf="form.invalid">El formulario debe ser válido para poder enviarse</small>
    </div>
  
  </form>

Lógica

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements OnInit {
  form:FormGroup
  constructor(private formBuilder:FormBuilder, private authenticationService:AuthenticationService, private route:Router) {
    this.form = this.formBuilder.group(
      {
        email:['', [Validators.required, Validators.email]],
        password:['', [Validators.required, Validators.minLength(8), Validators.maxLength(24)]]
      }
      );
   }

  ngOnInit(): void {

  }


    get Email() {
    return this.form.get('email');
    
    }
  
    
    get Password() {
    return this.form.get('password');
    }
    
    


    onSend(event: Event) {
    event.preventDefault;
    
    let jsonCredentials = {
    "username": this.Email?.value,
    "password": this.Password?.value
    };
    
    if(this.form.valid) {
      console.log(JSON.stringify(jsonCredentials));
      this.authenticationService.login(/*this.form.value*/ jsonCredentials).subscribe(data => {
      console.log("DATA: " + JSON.stringify(data));
      this.route.navigate([`/portfolio/${this.authenticationService.AuthenticatedUser.userId}`]);
    
  });
    }else{
      alert('Debe escribir un formulario válido')
    }
  }
}

CSS


input::placeholder{
    color: #979595;
}

.btn {
    background-color: #782add;
    color: #fff;
    padding: 10px 30px;
    width: 100%;
    margin-top: 10px;
}



.btn:hover {
    background-color: #6508df;
    transition: ease .2s;
}

.form-check-input:focus {
    background-color: #782add;
}
.form-check-input:checked {
    background-color: #782add;
    border: #fff;
}



.container-lg h1{
    text-align: center;
}

.container-lg{
    background-image: radial-gradient(circle at 50% -20.71%, #c2e8ff 0, #c8e6ff 6.25%, #cee5ff 12.5%, #d5e3ff 18.75%, #dbe1ff 25%, #e2e0ff 31.25%, #e8deff 37.5%, #eeddff 43.75%, #f4dbff 50%, #f9dafb 56.25%, #fed8f7 62.5%, #ffd7f2 68.75%, #ffd7ed 75%, #ffd6e8 81.25%, #ffd6e3 87.5%, #ffd6de 93.75%, #ffd6d9 100%);
    display: flex;
    flex-direction: column;
    height: 90vh;
    width: 40%;
    margin-top: 30px;
    border: 2px solid #782add;
    box-shadow: 2px 4px 8px;
    border-radius: 15px;
}

.m-5{
    height: 100vh;
    align-items: center;
}


.emailError, .passwordError {
    margin-left: 10px;
    font-size: 14px;
}



Por ejemplo, cuando hago click o escribo algo en el input del "Email" no me devuelve ningún mensaje de error, solamente se pone rojo... y al poner un Email válido no aparece el tick en verde, sino se queda en celeste el fondo del input... Me pasa lo mismo con la contraseña, no me muestra los mensajes de error, simplemente se pone en rojo...

Intenté pequeñas modificaciones prácticamente insignificantes en el template, pero no hubo diferencia...

1 respuesta 1

1

touched no es un error, es un estado. Reemplázalo por required y email:

 <div class="emailError" *ngIf="Email?.touched && Email?.errors">
    <p *ngIf="Email?.hasError('required')" class="text-danger">El email es requerido.</p>
    <p *ngIf="Email?.hasError('email')" class="text-danger">El formato del email debe ser válido.</p>
 </div>

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.