バリデーター関数への角度2のパスパラメーター

Question

私は自分のformcomponentクラスに配列を持っていて、その配列をバリデーター関数に渡したいと思っています。フォームに複数のバリデータを追加する場合は、Validators.compose関数を使用しています。これはバリデータ関数の名前だけを受け付け、渡すパラメータは受け付けません。 "compose"関数内の関数呼び出しにパラメータを追加することは可能ですか？任意の助け

export class ClientFormComponent 
 
{ 
 
    clientForm: ControlGroup; 
 
    npi: AbstractControl; 
 
    name: AbstractControl; 
 

 
    constructor(private _clientService: ClientService, _fb: FormBuilder) { 
 
     this.clientForm = _fb.group({ 'name': ['', Validators.compose([Validators.required])], 'npi': ['', Validators.compose([Validators.required, npiNumValidator, Validators.maxLength(10), Validators.minLength(10)])]}); 
 
     this.name = this.clientForm.controls['name']; 
 
     this.npi = this.clientForm.controls['npi']; 
 
    } 
 
    
 
    @Input() clientList; 
 
    active = true; 
 
    
 
    onSubmit(value: Client) { 
 
     this._clientService.addDeleteClient(value, true) 
 
      .subscribe(
 
      client => this.clientList.push(client));   
 
    }  
 
} 
 

 
function npiNumValidator(control: Control): { [s: string]: boolean } { 
 
    if (isNaN(control.value)) { 
 
     return { npiNAN: true }; 
 
    } 
 
}

ありがとう！

Answer 1

ちょうどあなたがまた活用し、あなたが

var npiNumVal = new NpiNumValidator(someArg); 
this.clientForm = _fb.group({ 'name': ['', 
    Validators.compose([Validators.required])], 'npi': ['', 
    Validators.compose([Validators.required, 
     npiNumVal.npiNumValidator.bind(npiNumVal), 
     Validators.maxLength(10), Validators.minLength(10) 
    ]) 
]}); 

Answer 2

を使用することができます

class NpiNumValicator { 
    constructor(private someField: someType) {} 

    npiNumValidator(control: Control): { [s: string]: boolean } { 
    if (isNaN(control.value)) { 
     return { npiNAN: true }; 
    } 
    } 
} 

そのクラスに移動npiNumValidator内thisを使用できるように

this.clientForm = _fb.group({ 'name': ['', 
    Validators.compose([Validators.required])], 'npi': ['', 
    Validators.compose([Validators.required, 
     new NpiNumValidator(someArg).npiNumValidator, 
     Validators.maxLength(10), Validators.minLength(10) 
    ]) 
]}); 

のようにそれを使用しますメソッドを使用して検証関数を作成します。この方法で、矢印機能を使用してこのコンポーネントのプロパティにアクセスできます。

@Component({ ... }) 
export class MyComponent { 
    constructor(private fb:FormBuilder) { 
    this.form = this.fb.group({ 
     fieldName: [ '', this.createValidator() ] 
    }); 
    } 

    createValidator() { 
    return (control) => { 
     var arr = this.arr; 
     (...) 
    }; 
    } 
} 

Answer 3

それが関数にパラメータを追加することは可能ですが、 「構成」機能の内部で呼び出します。ここでは

はサンプルですか？

バリ宣言：straight out of Angular Code

/* Validator that requires controls to have a value of a minimum length. */ 

static minLength(minLength: number): ValidatorFn { 
    return (control: modelModule.AbstractControl): {[key: string]: any} => { 
     if (isPresent(Validators.required(control))) return null; 
     var v: string = control.value; 
     return v.length < minLength ? 
       {"minlength": {"requiredLength": minLength, "actualLength": v.length}} : 
       null; 
    }; 
    } 

用途：

Validators.compose([Validators.minLength(4)] 

---

注：いくつかのケースでは、バリデータに渡される必要があるデータは動的で、バリデータを呼び出しているクラスで見つけることができますHow do JavaScript closures work?

Answer 4

を参照して、それをよりよく理解します。これらの例では、バリデーターを追加するときに単に "bind（this）"を使用しました。ここ はformBuilderの例である：

this.profileFormGroups.push(this.formBuilder.group({ 
    name: [profile.name, 
      Validators.compose([ 
       Validators.required, 
       Validators.maxLength(30), 
       Validators.pattern('[a-zA-Z ]*') 
       ]), 
      this.myNameValidator.bind(this) 
      ] 
    })); 
}, this); 

は、その後、あなたのバリデータでちょうど動的パラメータを参照：

//私の非同期検証

myNameValidator(control: FormControl): any { 
    let vm = this; 

    return new Promise(resolve => { 
    if (vm.mydynamicvalue === control.name) { ... } 
     resolve({"Invalid User":true}); 
    else 
     resolve(null) 
    }); 

}