조건부 폼 유효성 검사기 Angular2

Question

선택한 라디오 버튼을 기반으로 폼 유효성 검사기를 실행하려고합니다. 따라서 인스 타 그램이 선택되면 하나의 유효성 검사기가 실행되고, facebook이 선택되면 다른 유효성 검사기가 실행됩니다. 내 구성 요소 템플릿은 다음과 같다 :

<div class="form-group" [ngClass]="{ 'has-error' : !requestURL.valid && submitAttempt }"> 

         <div class="radio"> 

          <label for="instagram"> 
           <input type="radio" 
            name="socialmedia" 
            id="instagram" 
            value="instagram" 
            [checked]="selectedSourceType === 'instagram'" 
            (click)="updateSelectedSourceType('instagram')"> 

            <i class="fa fa-instagram"></i> 
          </label> 

          <label for="facebook"> 
           <input type="radio" 
            name="socialmedia" 
            id="facebook" 
            value="facebook" 
            [checked]="selectedSourceType === 'facebook'" 
            (click)="updateSelectedSourceType('facebook')"> 

            <i class="fa fa-facebook"></i> 
          </label> 

         </div> 

         <label for="requestSource">Submit URL</label> 
         <span *ngIf="requestURL.hasError('alreadyTracked')" class="already-following">Already Following This User</span> 

         <input type="text" 
          id="requestSource" 
          class="form-control" 
          placeholder="Enter a website, Facebook Page or Instagram handle" 
          ngControl="requestURL"> 

그래서에 selectedSourceType이 전환되고이 값이 실행되는 검증 결정해야 클릭합니다. 그러나 생성자 때문에 런타임의 원래 값은 다른 라디오 버튼을 선택해도 실행되는 유효성 검사기입니다. 아무도 이것에 대한 가능한 해결책이 있습니까?

theForm: ControlGroup; 
requestURL: Control; 
submitAttempt: boolean = false; 
isLoading: boolean = false; 
selectedSourceType:string = 'facebook'; 

validationUrls = { 
    instagram: 'post-ig-url?src=', 
    facebook: 'post-fb-url?src=' 
} 

constructor(private _applicationService:AppService, 
    private _elRef:ElementRef, 
    private _router:Router, 
    private _http:Http, 
    private _builder:FormBuilder) { 

    super(_elRef, _applicationService, _router); 

    this.createRequestURLControl(CustomValidators.facebookURL); 

    this.theForm = _builder.group({ 
     requestURL: this.requestURL 
    }); 
} 


requestSource(form){ 
    console.log('Selected source:', this.selectedSourceType); 

    this.isLoading = true; 
    this.submitAttempt = true; 

    let sub = this._http.post(this.validationUrls[this.selectedSourceType] + form.requestURL, '') 
     .subscribe(data => { 
      console.log("URL Submitted for review", data); 
      this.isLoading = false; 
     }, error => { 
      console.info(error.json().message); 
     }); 

    this.addSubscription(sub); 
} 

createRequestURLControl(validator:any) { 
    this.requestURL = new Control('', Validators.compose([validator, Validators.required])); 
} 

updateSelectedSourceType(sourceType:string) { 
    this.selectedSourceType = sourceType; 

    // update validators 
    if (sourceType === 'facebook') { 
     this.createRequestURLControl(CustomValidators.facebookURL); 
    } else { 
     this.createRequestURLControl(CustomValidators.instagramURL); 
    } 
    // clear input 
} 

Answer 1

그냥 발리 구성 요소의 방법, 또는 현재 범위에 폐쇄 너무합니다 이것은 내 수업의 내용이, 유효성 검사기 지금은 단지 문자열을 확인하고 개별적으로 예상대로 작동하는 것입니다 구성 요소의 값에 액세스 할 수 있습니다.

class MyComponent { 
    someValidator(c:Control) { 
    if(this.radio...) { 
     ... 
    } 
    } 

    createRequestURLControl(validator:any) { 
     this.requestURL = new Control('', Validators.compose([(c:Control) => this.someValidator(c), Validators.required])); 
    } 
} 

나는 조건부 방법이나 조건이 평가 될 수를 갖고 싶어 정확히 무엇을 검증 조사하지 않았다 그러나 당신은 생각을해야한다.

()=>을 사용하는 것이 중요하므로 this은 유효성 검사기 메소드 내부에서 계속 작동합니다.