2017-11-21 3 views
-3

이것은 암호를 확인하는 방법으로 암호 &을 확인하고 전자 메일을 확인하십시오. 당신이 볼 수 있듯이 전자 메일 및 암호 유효성 검사를 확인하기 위해 호출되는 function fieldMatcher가 있습니다.각도 반응 형식의 사용자 정의 유효성 검사기 기능에 매개 변수를 전달하는 방법은 무엇입니까?

// Works 

createForm() { 
      this.formGroup = this._formBuilder.group({ 
       firstName: '', 
       lastName: '', 
       email: '', 
       confirmEmail: '', 
       password: '', 
       confirmPassword: '', 
      }, {validator: this.fieldMatcher}); 
     } 
     fieldMatcher(c: AbstractControl): { invalid: boolean } { 
      if (c.get('password').value !== c.get('confirm').value) { 
       return {invalid: true}; 
      } 
      if (c.get('email').value !== c.get('confirmEmail').value) { 
       return {invalid: true}; 
      } 
     } 
    } 
내가 다음과 같은 코드를 줄일 수 있지만 작동하지 않도록 내가 매개 변수로 fieldMatcher 함수에 컨트롤을 전달하고자

,

// Do not Work 
createForm() { 
     this.formGroup = this._formBuilder.group({ 
      firstName: '', 
      lastName: '', 
      email: '', 
      confirmEmail: '', 
      password: '', 
      confirmPassword: '', 
     },{validator: this.fieldMatcher(value1, value2)}); 
     } 
     fieldMatcher(c: AbstractControl, value1, value2): { invalid: boolean } { 
      if (c.get(value1).value !== c.get(value2).value) { 
       return {invalid: true}; 
      } 
     } 

답변

0

그게 당신의 value1value2이 없기 때문에 어떤 것과도 전혀 관련이 없다. value1value2 대신 키를 보내야합니다. 아래의 예에서 참조하십시오.

작업 Plunker :http://plnkr.co/edit/RlWslfyr1eiTq4MSc3iY?p=preview

import {Component, FormBuilder, Control, ControlGroup, Validators} from 'angular2/angular2' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form [ng-form-model]="form"> 
     <label for="name">Name:</label> 
     <input id="name" type="text" ng-control="name"> 
     <br> 
     <div ng-control-group="matchingEmail"> 
     <label for="email">Email:</label> 
     <input id="email" type="email" ng-control="email"> 
     <br> 
     <label for="confirmEmail">Confirm Email:</label> 
     <input id="confirmEmail" type="email" ng-control="confirmEmail"> 
     </div> 
     <br> 
     <div ng-control-group="matchingPassword"> 
     <label for="password">Password:</label> 
     <input id="password" type="password" ng-control="password"> 
     <br> 
     <label for="confirmPassword">Confirm Password:</label> 
     <input id="confirmPassword" type="password" ng-control="confirmPassword"> 
     </div> 
    </form> 
    <p>Valid?: {{form.valid}}</p> 
    <pre>{{form.value | json}}</pre> 
    ` 
}) 
export class App { 
    form: ControlGroup 
    constructor(fb: FormBuilder) { 
    this.form = fb.group({ 
     name: [''], 
     matchingEmail: fb.group({ 
     email: ['', Validators.required], 
     confirmEmail: ['', Validators.required] 
     }, {validator: this.fieldMatcher('email','confirmEmail')}), 
     matchingPassword: fb.group({ 
     password: ['', Validators.required], 
     confirmPassword: ['', Validators.required] 
     }, {validator: this.fieldMatcher('password','confirmPassword')}) 
    }); 
    } 

fieldMatcher(value1: string, value2: string) { 
    return (group: ControlGroup) => { 
    if (group.controls[value1].value !== group.controls[value2].value) { 
     return group.controls[value2].setErrors({notEquivalent: true}) 
    } 
    } 
} 

} 
+0

그러나 추상적 제어가 여기에있다? – Karty

+0

controlGroup을 사용하여 데이터에 액세스합니다. 광산을 수정하여 추상 컨트롤을 사용합니다. 당신이 잘못한 논리. –

+0

ac로 어떻게 수정합니까? coz는 오류를 보여줍니다. – Karty