モデルとテンプレートベースコントローラで同じバリデータを使用する方法

Question

バリデーションを行うモデル駆動型のカスタムバリデータがあります。

テンプレート -

<form [formGroup] = "myForm" (ngSubmit) = "save(myForm.value)"> 

      <div> 
       <label>Name</label> 
       <input type="text" formControlName="name"> 
      </div> 
      <p *ngIf="myForm.controls.name?.errors">This has to be rahulsingh!</p> 
      <button type = "submit" > Submit</button> 
     </form> 

コンポーネント -

this.myForm = this.fb.group({ 
      name: ['', [this.validateName]]   
     }); 


validateName(c: FormControl) { 
    return (c.value === 'rahulSingh') ? null : { 
     notCorrect: true 
    }; 
} 

これは、モデル駆動型フォーム

しかしドリブンテンプレートのこの同じ検証機能

を使用する方法私は、次のいのために働きますこのリンクhttp://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html

しかし、私はこの関数を両方のフォームに対してグローバルにする方法を理解することはできませんし、指示として使用します。私はいつもこれを達成しようとする間違ったエラーを得ることに終わります。

はまた一つ奇妙なことは、私がしようとすると、私のテンプレートである

<p *ngIf="myForm.hasErrors('notCorrect')">This has to be rahulsingh!</p> 

私は未定義のプロパティ「hasError」を読み取ることができません取得します。

Answer 1

を助けることを願っています、次のように反応的なフォーム（ニートトリック）に自動的に適用されます：

import { Directive, Input } from '@angular/core'; 
import { FormControl, NG_VALIDATORS, Validator } from '@angular/forms'; 

@Directive({ 
    selector: '[requiredName][ngModel]', 
    providers: [{provide: NG_VALIDATORS, useExisting: SpecificNameValidatorDirective, multi: true}] 
}) 
export class SpecificNameValidatorDirective implements Validator { 
    private valFn = (c: FormControl, name: string) { 
    return (c.value === name) ? null : { 
     notCorrect: true 
    }; 
    } 

    @Input('requiredName') name: string = "temp"; 

    constructor() { 
    } 

    validate(control: AbstractControl): {[key: string]: any} { 
    console.log("validation station", this.name, control.value); 
    return this.valFn(control, this.name); 
    } 
} 

<form #myForm="ngForm" (ngSubmit)="save(myForm.value)"> 
    <div> 
     <label>Name</label> 
     <input requiredName="rahulSingh" name="name" ngModel #name="ngModel" type="text" id="name"> 
    </div> 
    <p *ngIf="name.errors?.notCorrect">This has to be rahulSingh!</p> 
    <button type="submit"> Submit</button> 
</form> 

テンプレート駆動型フォームのための十分なわかりやすい

：デフォルト値は、我々はそうのようなテンプレート駆動形式のディレクティブを使用することができます意味が設けられているものの、その名前で、ここでのねじれは、ハードコード化されていません。ディレクティブの私達のインスタンスで私たちのフォームを作成し、その後

var validator = new SpecificNameValidatorDirective(); 

と我々は

validator.name = "nobdy"; 

名前を設定し、：：私たちはディレクティブのインスタンスをインスタンス化することができ、反応性フォームの

this.myForm = this.fb.group({ 
      name: ['',[validator]] 
     }); 

これにより、自動的にvalidate機能が検索され、さまざまなバリデーターがすべてValidator interface definitionに従っています。 jankyの部分は、コンストラクタではなく別の行に名前を設定していますが、私はテンプレート駆動バージョンでそのプレーをうまく行かせることができませんでした。

とにかく、あなたのために利用できるPlunkerがあります。

Answer 2

あなたはクラスと同じように関数をエクスポートすることができます

export const validateName:ValidateFn = (c: FormControl) { 
    return (c.value === 'rahulSingh') ? null : { 
     notCorrect: true 
    }; 
} 

し、それらをインポートします。

import {validateName} from '...'; 

    this.myForm = this.fb.group({ 
     name: ['', [validateName]]  
    }); 

与えられた以下は、このチュートリアルでは、How to Implement a Custom Validator Directive

Answer 3

を助けるかもしれない電子メールのディレクティブです検証

import { Directive, forwardRef } from '@angular/core'; 
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms'; 

@Directive({ 
    selector: '[validateEmail]', 
    providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => ValidateEmail), multi: true }] 
}) 
export class ValidateEmail implements Validator { 

    constructor() { } 

    validate(c: AbstractControl): { [key: string]: any } { 
    let EMAIL_REGEXP = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i; 

    if (!c.value) return null; 
    return EMAIL_REGEXP.test(c.value) ? null : { 
     validEmail: true 
    }; 
    } 
} 

012以下の

は、モデルを別のモデルと一致させるための別のカスタム検証ディレクティブです。

import { Directive, ElementRef, forwardRef, Attribute } from '@angular/core'; 
import { Validator, AbstractControl, NG_VALIDATORS, FormControl } from '@angular/forms'; 

@Directive({ 
    selector: '[matchControl][ngModel]', 
    providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => MatchControl), multi: true }] 
}) 
export class MatchControl implements Validator{ 

    constructor(@Attribute('matchControl') private matchControl: string) { } 

    validate(c: AbstractControl): { [key: string]: any; } { 
    let v = c.value; 
    let e = c.root.get(this.matchControl) 

    return (e && v !== e.value) ? { 
     match: true 
    } : null; 
    } 
} 

とそのHTML

<input name="password" type="password" class="form-control" required minlength="8" maxlength="15" [(ngModel)]="user.password" #password="ngModel"> 
<input name="cpassword" type="password" class="form-control" required [(ngModel)]="user.cpassword" #cpassword="ngModel" matchControl="password"> 

たちは、テンプレート駆動型フォームいるに適用されますディレクティブを構築します、これらの2つの例では、開始するには、あなた