Angular 2
Angular2カスタム検証

パラメーター

カスタムバリデータの例：

Angular 2には2種類のカスタムバリデーターがあります。クライアントで直接実行される最初の例のような同期型バリデータと、検証を行うためにリモートサービスを呼び出すために使用できる非同期バリデータ（2番目の例）です。この例では、バリデーターはサーバーを呼び出して、値が一意であるかどうかを調べる必要があります。

export class CustomValidators {

static cannotContainSpace(control: Control) {
    if (control.value.indexOf(' ') >= 0)
        return { cannotContainSpace: true };

    return null;
}

static shouldBeUnique(control: Control) {
    return new Promise((resolve, reject) => {
        // Fake a remote validator.
        setTimeout(function () {
            if (control.value == "exisitingUser")
                resolve({ shouldBeUnique: true });
            else
                resolve(null);
        }, 1000);
    });
}}

コントロールの値が有効な場合は、単にnullを呼び出し側に返します。それ以外の場合は、エラーを記述するオブジェクトを返すことができます。

Formbuilderでバリデータを使用する

   constructor(fb: FormBuilder) {
    this.form = fb.group({
        firstInput: ['', Validators.compose([Validators.required, CustomValidators.cannotContainSpace]), CustomValidators.shouldBeUnique],
        secondInput: ['', Validators.required]
    });
}

ここではFormBuilderを使用して2つの入力ボックスを持つ非常に基本的なフォームを作成します。 FromBuilderは、各入力コントロールに対して3つの引数の配列をとります。

1. コントロールのデフォルト値です。
2. クライアント上で実行されるバリデータ。 Validators.compose（[arrayOfValidators]）を使用して、複数のバリデータをコントロールに適用することができます。
3. 第2引数と同様の方法で、1つ以上の非同期バリデータ。

get / set formBuilderはパラメータを制御します

formBuilderコントロールのパラメータを設定する2つの方法があります。

1. 初期化時：

exampleForm : FormGroup;
constructor(fb: FormBuilder){
  this.exampleForm = fb.group({
      name : new FormControl({value: 'default name'}, Validators.compose([Validators.required, Validators.maxLength(15)]))
   });
}

2.After初期化する：

this.exampleForm.controls['name'].setValue('default name');

formBuilderのコントロール値を取得する：

let name = this.exampleForm.controls['name'].value();