名称重复验证

Question

我试图通过以下方式进行自定义验证，以便当在ts中定义的对象数组的输入中输入一个重复的名称时，应该会出现名称已经存在于mat错误中的消息。

这是我的html，在这里我用name字段实现表单，其中有两个mat错误，一个表示它是必需的，另一个表示名称已经存在，我将非常感谢您的帮助。

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>

这是我初始化表单并放置验证的ts。

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
      }
    };
  }

}

Answer 1

我认为您无法在totalStudents方法中检索validateName值。

您需要实现一个ValidatorFn方法来传递totalStudents。

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

对于表单组，只通过与totalStudents映射传递name。

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

样本StackBlitz演示

附带说明：

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

可替换为：

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

参考资料

具有角参数的自定义Validator