Validar inputs del formulario de login

Validar inputs del formulario de login
agregamos password de type password al template

<ion-item>
    <ion-label>Password</ion-label>
    <ion-input type="password" formControlName="password"></ion-input>
</ion-item>

en el componente copiamos la definición de email y pegamos abajo y lo cambiamos el nombre por password.
Ajustamos las validaciones para password.
Requerido, minLength donde especificamos caracteres mínima.

password: new FormControl('', Validators.compose([
        Validators.required,
        Validators.minLength(5)
      ])),

Agregamos mensajes al usuario sobre el llenado de los campos
para esto en el component creamos variable con mensajes en json
cuando error sea de tipo required el mensaje es “tal”
si es de tipo pattern el mensaje es “tal otro”

validationMessages = {
    email: [
      {
        type: 'required', message: 'El email es requerido'
      },
      {
        type: 'pattern', message: 'El email es incorrecto'
      }]
  };

En el html creamos un div con una class llamada validation-error
Agregamos un ng-conteiner con un *ngFor que recorra las validaciones
dentro de un div agregamos un *ngIf donde traemos el campo email y verificamos si tiene un error. Además si el campo ya está sucio nos muestre el mensaje. O si ya se hizo focus en el input

<div class="validation-error">
    <ng-container *ngFor="let validation of validationMessages.email">
      <div
        *ngIf="
          (loginForm.get('email').hasError(validation.type) &&
            loginForm.get('email').dirty) ||
            loginForm.get('email').touched
        "
      >
      </div>
    </ng-container>
  </div>

Para el password agregamos lo mismo al html solo que modificamos email por password

<div class="validation-error">
    <ng-container *ngFor="let validation of validationMessages.password">
      <div
        *ngIf="
          (loginForm.get('password').hasError(validation.type) &&
            loginForm.get('password').dirty) ||
            loginForm.get('password').touched
        "
      >
      </div>
    </ng-container>
  </div>

en el page.ts agregamos al json

password: [
        {
          type: 'required', message: 'El password es requerido'
        },
        {
          type: 'minLength', message: 'Tamaño minimo 5 caracteres'
        }],

Tengo un problema, cuando mi input pierde el focus la validación se pierde y me salen todos los mensajes de error, no estoy seguro de por que es

<div class="validation-error">
      <ng-container *ngFor="let validation of validation_messages.email">
        <div
          *ngIf="(loginForm.get('email').hasError(validation.type) && loginForm.get('email').dirty) || loginForm.get('email').touched">
          {{validation.message}}
        </div>
      </ng-container>
    </div>```

IONIC 6

Las validaciones explicadas por el profesor deberían funcionar bien en Ionic 6, pero hay un error en el archivo login.page.html, el archivo completo debe quedar así:

<ion-content>
  <figure class="ion-text-center ion-padding">
    <img src="../../assets/img/logo.png" alt="Logo Platzi Music">
  </figure>
  <form [formGroup]="loginForm" (ngSubmit)="loginUser(loginForm.value)">
    <ion-item>
      <ion-label>Email:</ion-label>
      <ion-input formControlName="email"></ion-input>
    </ion-item>
    <div class="validation- error">
      <ng-container *ngFor="let validation of validationMessages.email">
        <div *ngIf="loginForm.get('email').hasError(validation.type) && (loginForm.get('email').dirty || loginForm.get('email').touched)">
          {{ validation.message }}
        </div>
      </ng-container>
    </div>
    <ion-item>
      <ion-label>Password:</ion-label>
      <ion-input type="password" formControlName="password"></ion-input>
    </ion-item>
    <div class="validation-error">
      <ng-container *ngFor="let validation of validationMessages.password">
        <div *ngIf="loginForm.get('password').hasError(validation.type) && (loginForm.get('password').dirty || loginForm.get('password').touched)">
          {{ validation.message }}
        </div>
      </ng-container>
    </div>
  </form>
</ion-content>

Tengan en cuenta que la variable usada por el profesor validation_messages, la cambié por validationMessages

como para que tengan en cuenta que en la validación de los campos estan mal unos parentesis, lo que hace que se muestre todos los errores de validación de los campos, Aca les dejo el link a mi repo con el commit de esta clase para el que le pueda servir

Solucione el Error que había en el formulario,

La validación del hasError debe estar antes y después de la sentencia OR

<div class="validation-error">
      <ng-container *ngFor= 'let validation of validation_messages.password'>
        <div *ngIf= 
          "(loginForm.get('password').hasError(validation.type) && loginForm.get('password').dirty) 
          || (loginForm.get('password').touched && loginForm.get('password').hasError(validation.type))
          "
        >  
          {{ validation.message }}
        
        </div>

El warning del minLength no me funciona. Simplemente no aparece. Modifiqué la lógica del if para que salten todos los errores y así si sale.
Mi index:

<ng-container *ngFor="let validation of validation_messages.passwd"> <div *ngIf="(loginForm.get('passwd').hasError(validation.type) && loginForm.get('passwd').dirty) || loginForm.get('passwd').touched"> {{validation.message}} </div> </ng-container>
Mi ts:
validation_messages = { email: [ {type: 'required', message: 'El email es requerido.'}, {type: 'email', message: 'Este no es un email válido'} ], passwd: [ {type: 'minLength', message: 'Minimo 5 caracteres en tu password'}, {type: 'required', message: 'El password es requerido.'}, ], }

una buena forma de reducir algo del codigo html y hacer mas entendible la condicionar es usar los getter de typescript

Archivo TS

get formEmail() {
    return this.formLogin.get('email');
  }

HTML

<div class="validation-error">
            <ng-container *ngFor="let validation of validationMessage.email">
                <div *ngIf="formEmail.hasError(validation.type) &&
                            (formEmail.dirty ||
                             formEmail.touched)">
                    {{validation.message}}
                </div>
            </ng-container>
        </div>

Para construir el formulario lo hice de una manera que en mi opinión es más limpia.

this.loginForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-][email protected][a-zA-z0-9-]+.[a-zA-Z0-9-.]+$')]],
      password: ['', [Validators.required, Validators.minLength(8)]]
    });

Y para las validaciones creé una función

invalidForm(field: string) {
    return this.loginForm.get(field).invalid && this.loginForm.get(field).touched;
  }

Despues solo la llamamos con el campo en el html sin necesidad de volver a escribir todas las validaciones

<div *ngIf="invalidForm('password')">
          {{ validation.message }}
</div>