角2：更新FormControl验证器后valueChanges

有没有办法更新一个FormControl对象Validtors？我有FormGroup其中一个输入是一个选择字段，当选择字段的值发生变化时，我希望FormGroup中的其他FormControl更改验证器。角2：更新FormControl验证器后valueChanges

这是我从我的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不在写入输入字段时再更新。最初价值正在更新。

来源

2016-10-06 Markus Török

使用补丁值更新形式this.form.patchValue（{controlTobeUpdated：值}）; https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html#!#patchValue-anchor – Manish

@ user32但是'patchValue（）'允许我只更新值 - 不是验证器？ –

没错。 patchValue（）允许你更新值，但是一旦该值被更新，验证器将被触发。 – Manish

要重新检查FormGroup中的控件，可以使用FormControl的updateValueAndValidity做一些事情。

如果this.appsForm的确是一个FormGroup：

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

来源

2016-10-06 14:14:07 PierreDuc

我认为这只会更新验证状态 - 但不是验证器的正则表达式模式？ –

你可以选择触发一个更改事件，如下

<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根据你在下拉列表中的选择。我相信这会解决您的问题。

来源

2016-10-07 07:49:29 znwz

我通过在我的平台选择字段上侦听valueChanges解决了该问题，然后在appId输入字段上使用setValidators()方法。 This article是相当有帮助的。

这里是我的解决方案：

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(); 
    }); 
    }

来源

2016-10-07 10:36:23

角2：更新FormControl验证器后valueChanges

回答

相关问题