angular - Nimen kaksoiskappaleen vahvistus

Yritän seuraavalla tavalla mukautettua validointia, jotta kun syötetty nimi on jo olemassa ts:ssä määritellyssä objektitaulukossa, viestin siitä, että nimi on jo olemassa, tulisi näkyviin mat-errorissa

Tämä on minun HTML:ni, jossa toteutan lomakkeen nimikentällä, jossa on 2 mat-virhettä, joista toinen ilmaisee, että se on pakollinen, ja toinen ilmaisee, että nimi on jo olemassa, arvostaisin suuresti apuasi

app.html

<form [formGroup]="form">
  <div>
      <mat-form-field>
        <input
         matInput
         type="text"
         [formControl]="name"
         required
        />
        <mat-error *ngIf="name.hasError('required')">
          It´s required
        </mat-error>
        <mat-error *ngIf="name.hasError('validateName')">
          the name already exists
        </mat-error>
      </mat-form-field>
   </div>
</form>

Tämä on ts, jossa alustaan lomake ja laitan validoinnit

app.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: "student"
    },
    {
      name: "Paola",
      rol: "student"
    }
  ];

  constructor( private fb: FormBuilder) { }

  ngOnInit() {
    this.start();
  }

  start() {
    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
      }
    };
  }

}

Vastaus #1

Uskon, ettet pysty hakemaan totalStudents-arvoa validateName-metodissa.

Sinun täytyy toteuttaa ValidatorFn-metodi hyväksyäksesi totalStudents.

uniqueNameValidation(names: string[]): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    return !names.find((x) => x == control.value)
      ? null
      : {
          validateName: {
            valid: false,
          },
        };
  };
}

Lomake-ryhmälle lähetä totalStudents yhdistämällä vain name.

this.form = this.fb.group({
  name: [
    '',
    Validators.compose([
      Validators.required,
      this.uniqueNameValidation(this.totalStudents.map((x) => x.name)),
    ]),
  ],
});

Esimerkkikuva StackBlitzistä

Sivuhuomautus:

Validators.compose([
  Validators.required,
  this.uniqueNameValidation(this.totalStudents.map((x) => x.name)),
]),

voidaan korvata seuraavalla:

[
  Validators.required,
  this.uniqueNameValidation(this.totalStudents.map((x) => x.name)),
]

Viitteet

Mukautettu validointiominaisuus parametreilla Angularissa