Как проверить контрольное значение реактивной формы (Model Driven Form), является ли оно дублированием существующего значения в angular2?

Question

У меня есть список названий команд, которые я получаю от службы. При создании новой команды с использованием реактивной формы я хочу добавить настраиваемый валидатор в текстовое поле teamName, чтобы проверить, существует ли это имя или нет. Может кто-нибудь, пожалуйста, дайте мне знать, как это сделать? Возможно ли добавить валидатор в этом случае?

Answer 1

Вот простой пример того, как это можно сделать. Ниже находится app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { CustomValidator } from './custom-validators';

const prevNames = ['hector', 'steve', 'adam', 'peter'];

@Component({
  selector: 'app-root',
  template: `
   <div [formGroup]="newName">
     <input formControlName="newName">
   </div>`,
  styleUrls: [`./app.component.css`]
  })
export class AppComponent implements OnInit {
  newName: FormGroup;
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.newName = this.fb.group({
      newName: this.fb.control('',CustomValidator.checkNamesMatched(prevNames))
    });
  } // End Of Init
} // End of Class

Ваш валидатор входит в качестве второго аргумента в контроле формы и вставляет массив имен в качестве аргумента валидатора. Предполагая, что у вас есть список имен в массиве. Ниже находится custom-validators.ts

export class CustomValidator {
static checkNamesMatched(arrayOfNames: string[]) {
    return (control) => {
        let matched = false;
        arrayOfNames.forEach((value) => {
            if (value.toLowerCase().trim() === control.value.toLowerCase().trim()) {
                return matched = true;
            }
        });
        return (!matched) ? null : { checkNamesMatched: true };
    };
  } // End of method
} // End of Class

ваш валидатор будет проходить через каждый элемент arrayOfNames (а также в нижнем регистре и удалять пробелы с обоих концов для точного сравнения) и проверять, равно ли оно значению в элементе управления. Если ни один из них не соответствует, он вернет ноль (что означает отсутствие ошибок), в противном случае сообщая о совпадении (что приведет к ошибке). Убедитесь, что вы делаете весь необходимый импорт в компоненте и модуле. Надеюсь, поможет! Ниже представлен app.module на всякий случай.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }