如何验证反应形式（模型驱动形式）控制值是否与angular2中的现有值重复？

Question

I have a list of team names which I'm getting from a service. While creating a new team using reactive form, I want to add a custom validator to teamName text box to check whether that name is already existing or not. Can any one please let me know how to do it? Is this possible to add a validator in this case?

Answer 1

Here is a simple example of how it can be done. Below is the 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

Your validator goes in as your second argument in the Form Control and insert your array of names as your validators argument. Assuming you have your list of names in an array. Below is the 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

your validator will go through each element of the arrayOfNames (as well as lowercasing and removing whitespace from either ends to accurately compare) and seeing if it is equal to the value in the control. If none has matched it will return null (meaning no errors) otherwise reporting one has matched (which will return an error). Make sure you do all necessary import in the component and module. Hope it helps! Below is the app.module just in case.

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