角2：ValueChangesの後のFormControlバリデータを更新

Question

FormControlオブジェクトのValidtorsを更新する方法はありますか？私はFormGroupを持っています1つの入力は選択フィールドです。選択フィールドの値が変わったときFormGroup内の他のFormControlでバリデーターを変更します。

<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> 

私はappsForm.controls.appId.valueにはない、ここで示したような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テンプレートです：ここで

は私のFormGroupコンポーネントから私のsubscribeToFormChanges()方法であり、入力フィールドに書き込むときにもう更新されません。最初は値が更新されています。 FormGroup内のコントロールを再確認するには

Answer 1

、あなたはFormControlの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(); 
    }); 
    }