각도 2 : ValueChanges 뒤에 FormControl 유효성 검사기 업데이트

Question

Validtors FormControl 개체를 업데이트하는 방법이 있습니까? 내가 FormGroup 하나의 입력 필드를 선택 필드의 값을 변경하면 내 FormGroup에서 유효성 검사기를 변경하려면 다른 FormControl 원하는. 여기

내 FormGroup 구성 요소에서 내 subscribeToFormChanges() 방법 :

private appIdRegexes = { 
    ios: /^[a-zA-Z][a-zA-Z0-9]*(\.[a-zA-Z0-9\-]+){2,}$/, 
    android: /^([a-zA-Z])[a-zA-Z0-9_]*(\.[a-zA-Z][a-zA-Z0-9\-]*){2,}$/, 
    any: /^any$/ 
    }; 

private subscribeToFormChanges(): void { 
    const myFormValueChanges$ = this.appsForm.valueChanges; 
    myFormValueChanges$.subscribe(x => { 
     const platform = this.appsForm.controls['platform'].value; 
     const appId = this.appsForm.controls['appId'].value; 

     if (this.appIdRegexes[platform]) { 
     this.appsForm.controls['appId'] = new FormControl(appId, Validators.pattern(this.appIdRegexes[platform].source)); 
     } 
    }); 
    } 

을 그리고 여기에 HTML 템플릿입니다 :

<div class="row" [formGroup]="appsForm"> 
    <div class="form-group col-xs-6"> 
    <label>Platform</label> 

    <select id="licensePlatform" class="form-control" 
      formControlName="platform"> 
     <option *ngFor="let platform of licensePlatforms" [value]="platform"> 
     {{platform}} 
     </option> 
    </select> 

    <small [hidden]="appsForm.controls.platform.valid"> 
     Platform is required 
    </small> 
    </div> 

    <div class="form-goup col-xs-6"> 
    <label>App ID</label> 
    <input type="text" class="form-control" formControlName="appId"> 
    <small [hidden]="appsForm.controls.appId.valid"> 
     Please use the right ID format 
    </small> 
    </div> 
</div> 

여기에 표시된 것처럼이 subscribeToFormChanges() 방법을 구현하고있어, appsForm.controls.appId.value하지 않는 입력 필드에 쓸 때 더 이상 업데이트되지 않습니다. 초기 값은 업데이트 중입니다.

Answer 1

FormGroup에있는 컨트롤을 다시 확인하려면 의 updateValueAndValidity으로 무엇인가 할 수 있습니다. this.appsForm 만약

참으로 FormGroup입니다 :

이

this.appsForm.controls.forEach(control => control.updateValueAndValidity()); 

Answer 2

당신이

<select id="licensePlatform" class="form-control" 
      formControlName="platform" (change)="update($event.target.value)" > 
     <option selected="selected" disabled="disabled" value="">Select Card Type</option> 
     <option *ngFor="let platform of licensePlatforms" [value]="platform" > 
     {{platform}} 
     </option> 
    </select> 

다음과 같이 선택에서 변경 이벤트를 해고 할 수 그리고 구성 요소에 당신이

아래와 같이 업데이트 기능을 쓸 수 있습니다

update(value){ 
     if(value){ 
     (<FormControl>this.appsForm.controls['platform']).setValue(value, {onlySelf: false}); 
     const appId = this.appsForm.controls['appId'].value; 
     if (this.appIdRegexes[value]) { 
     this.appsForm.controls['appId'] = new FormControl(appId, Validators.pattern(this.appIdRegexes[value].source)); 
     } 
    }; 

    } 

그러면 유효성 검사기 acco가 업데이트됩니다. 드롭 다운에서 선택한 항목을 선택하십시오. 문제가 해결 될 것으로 믿습니다.

Answer 3

플랫폼 선택 필드에서 valueChanges을 듣고 문제를 해결 한 후 appId 입력 필드에 setValidators() 메서드를 사용합니다. This article 꽤 도움이되었습니다. 폼 this.form.patchValue을 업데이트

private subscribePlatformChanges() { 
    const platformCtrl = this.appsForm.controls['platform']; 
    const changes$ = platformCtrl.valueChanges; 

    changes$.subscribe(platform => { 
     this.appsForm.controls['appId'].setValidators([Validators.pattern(this.appIdRegexes[platform].source), 
                Validators.required]); 
     this.appsForm.controls['appId'].updateValueAndValidity(); 
    }); 
    }