反応型（モデル駆動型）の制御値を、angular2の既存の値と重複しているかどうかを検証する方法は？

Question

私はサービスから得ているチーム名のリストを持っています。リアクションフォームを使用して新しいチームを作成する際に、チーム名テキストボックスにカスタムバリデータを追加して、その名前が既に存在するかどうかを確認したいと思います。どのように私にそれを行う方法を教えてくださいできますか？この場合、バリデータを追加することは可能ですか？

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 

あなたのバリデータはフォームコントロールで2番目の引数として行くと、あなたのバリの引数として名前のあなたの配列を挿入しています。 配列に名前のリストがあるとします。以下は、カスタム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の各要素を通過します、あなたのバリ制御。一致していない場合は、nullを返します（そうでない場合はエラーを返します）。そうでなければ、エラーが返されます。コンポーネントとモジュールで必要なインポートをすべて実行してください。それが役に立てば幸い！ちょうどその場合の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 { }