각도 2의 고유성에 대한 사용자 정의 유효성 검사기

Question

나는 Angular2 양식 필드가 있습니다. 입력 된 값이 존재하지 않도록 요구하고 싶습니다. 내 구성 요소는 @Input 매개 변수를 통해 기존 값의 배열을받습니다. 내 구성 요소 인 codeUnique()에 사용자 정의 유효성 검사기 함수가 있지만 인스턴스가 실행될 때 인스턴스 멤버에 액세스 할 수 없습니다. "this"는 FormControl 또는 undefined를 반환합니다. 내 유효성 검사기 함수는 외부 공간으로 빨려 들어갔고 컨텍스트와 인스턴스 변수는 제거되었습니다. 기존 값 목록을 유효성 검사기로 가져 오는 방법은 무엇입니까? 공포를 글로벌 범위에 넣을 수 있을까요?

import { Component, Input, Output, EventEmitter } from '@angular/core'; 
import { NG_VALIDATORS, FormControl, FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms'; 

import { ReferringAppModel } from './referringapp.model'; 
//import { CodeValidator } from './code-validator'; 

@Component({ 
    selector: 'add-client-form', 
    templateUrl: 'src/home/add-client-form.component.html' 
}) 
export class AddClientFormComponent { 
    myForm: FormGroup; 
    code: AbstractControl; 
    name: AbstractControl; 

    constructor(fb: FormBuilder) { 
     this.myForm = fb.group({ 
      'code': ['', this.codeUnique], 
      'name': ['', Validators.required] 
     }); 
     this.code = this.myForm.controls['code']; 
     this.name = this.myForm.controls['name']; 
    } 
    @Input() referringApps: ReferringAppModel[]; 

    ngOnInit() { 
    } 
    onSubmit(form: any): void { 
     console.log("submitted") 
    }; 

    codeUnique(c: FormControl) { 
     try { 
      // Blows up. 
      return !this.referringApps.find(appInApps => appInApps.Code == c.value) ? null : { 
       //return false ? null : { // WORKS 
       validateEmail: { 
        valid: false 
       } 
      }; 
     } catch (ex) { 
      console.log(ex); 
     } 
    } 
} 


TypeError: Cannot read property 'referringApps' of undefined 
    at AddClientFormComponent.codeUnique (http://localhost/HubHacienda/dist/bundle.js:50071:26) 
    at http://localhost/HubHacienda/dist/bundle.js:43538:54 
    at Array.map (native) 
    at _executeValidators (http://localhost/HubHacienda/dist/bundle.js:43538:28) 
    at FormControl.Validators.compose [as validator] (http://localhost/HubHacienda/dist/bundle.js:43518:38) 
    at FormControl.AbstractControl._runValidator (http://localhost/HubHacienda/dist/bundle.js:45083:54) 
    at FormControl.AbstractControl.updateValueAndValidity (http://localhost/HubHacienda/dist/bundle.js:45061:38) 
    at FormControl.setValue (http://localhost/HubHacienda/dist/bundle.js:45327:19) 
    at DefaultValueAccessor.onChange (http://localhost/HubHacienda/dist/bundle.js:44287:22) 
    at DebugAppView._View_AddClientFormComponent0._handle_input_12_0 (AddClientFormComponent.ngfactory.js:493:47) 
    at DebugAppView.eventHandler (http://localhost/HubHacienda/dist/bundle.js:35576:29) 
    at COMPONENT_REGEX (http://localhost/HubHacienda/dist/bundle.js:38521:41) 
    at http://localhost/HubHacienda/dist/bundle.js:38634:116 
    at ZoneDelegate.invoke (http://localhost/HubHacienda/dist/bundle.js:6875:29) 
    at Object.onInvoke (http://localhost/HubHacienda/dist/bundle.js:32132:42) 
    at ZoneDelegate.invoke (http://localhost/HubHacienda/dist/bundle.js:6874:35) 
    at Zone.runGuarded (http://localhost/HubHacienda/dist/bundle.js:6782:48) 
    at NgZoneImpl.runInnerGuarded (http://localhost/HubHacienda/dist/bundle.js:32161:83) 
    at NgZone.runGuarded (http://localhost/HubHacienda/dist/bundle.js:32393:78) 
    at HTMLInputElement.outsideHandler (http://localhost/HubHacienda/dist/bundle.js:38634:84) 
    at ZoneDelegate.invokeTask (http://localhost/HubHacienda/dist/bundle.js:6908:38) 
    at Zone.runTask (http://localhost/HubHacienda/dist/bundle.js:6808:48) 
    at HTMLInputElement.ZoneTask.ZoneTask.cancelFn.invoke (http://localhost/HubHacienda/dist/bundle.js:6976:34) 

Answer 1

간단한 : 발리를 할당 할 때 그렇게처럼, 그것은 당신의 클래스의이 인수를 바인딩 : 'code : ['', this.codeUnique.bind(this)]

Answer 2

codeUnique = (c: FormControl) => { 
    // Your validation will go here 
}