0

E intentando de la siguiente manera una validación personalizada para que cuando se ponga en el input un nombre duplicado al arreglo de objetos definido en el ts, debe aparecer el mensaje de que el nombre ya existe en el mat-error

Este es mi html donde implemento el formulario con el campo nombre, done estan 2 mat errors uno indicando que es requerido y otro indicando que el nombre ya existe, agradeceria mucho su ayuda

html

<form [formGroup]="form">
  <div>
      <mat-form-field>
        <input
         matInput
         type="text"
         [formControl]="name"
         required
        />
        <mat-error *ngIf="name.hasError('required')">
          Es requerido este campo
        </mat-error>
        <mat-error *ngIf="name.hasError('validateName')">
          Este nombre ya existe
        </mat-error>
      </mat-form-field>
   </div>
</form>

Este es el ts donde inicializo el formulario y pongo las validaciones

ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, AbstractControl, ValidationErrors } from '@angular/forms';

@Component({
  selector: 'app-formulario',
  templateUrl: './component.html',
  styleUrls: ['./component.scss'],
})
export class AdminMaintainerFormsDialogComponent implements OnInit{
  public form: FormGroup;
  public name: AbstractControl;
  public totalStudents: any =
  [
    {
      name: "Sandro",
      rol: "estudiante"
    },
    {
      name: "Paola",
      rol: "Estudiante"
    }
  ];

  constructor( private fb: FormBuilder) { }

  ngOnInit() {
    this.inicializacionFormulario();
  }

  inicializacionFormulario() {
    this.form = this.fb.group({
      name: ['', Validators.compose([Validators.required, this.validateName ])]
    });
  }

  private validateName(control: AbstractControl): ValidationErrors | null {
    const names = this.totalStudents;
    let compareName;

    names.map(value => {
      compareName = value.name;
    })

    return compareName.test(control.value) ? null : {
      validateName: {
        valid: false
      }
    };
  }

}

Agradecería mucho su ayuda

1
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    el 31 jul. 2022 a las 7:07

1 respuesta 1

0

Dejo correcciones enumeradas en comentarios:

.ts

export class AppComponent {
  public form: FormGroup;
  public name: AbstractControl;
  public totalStudents =
  [
    {
      name: "Sandro",
      rol: "estudiante"
    },
    {
      name: "Paola",
      rol: "Estudiante"
    }
  ];

  constructor( private fb: FormBuilder) { }

  ngOnInit() {
    this.inicializacionFormulario();
  }

  inicializacionFormulario() {
    // 1. llamar la función bind para que la función validateName tenga referencia a este objeto
    this.form = this.fb.group({
      name: ['', Validators.compose([Validators.required, this.validateName.bind(this) ])]
    });
  }

  private validateName(control: AbstractControl): ValidationErrors | null {
    // 2. refactorización de la forma en la que se hace la comparación
    if(this.totalStudents.some(e => e.name.toLowerCase() == control.value.toLowerCase())){
      return {
        validateName: {}
      }
    }
    return null
  }
}

.html

<!-- 3. usar el formControl del formGroup -->
<form [formGroup]="form">
  <div>
      <mat-form-field>
        <input
         matInput
         type="text"
         formControlName="name"
         required
        />
        <mat-error *ngIf="form.controls.name.hasError('required')">
          Es requerido este campo
        </mat-error>
        <mat-error *ngIf="form.controls.name.hasError('validateName')">
          Este nombre ya existe
        </mat-error>
      </mat-form-field>
   </div>
</form>

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.