Javascript 角度2：值更改后更新FormControl验证程序

是否有方法更新FormControl对象的

有效值

？我有

FormGroup

，其中一个输入是选择字段，当选择字段的值更改时，我希望FormGroup中的另一个FormControl更改验证器

以下是我的表单组组件中的

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>

站台
{{platform}}
需要站台
应用程序ID
请使用正确的ID格式

---

当我实现这里所示的

subscribeToFormChanges（）

方法时，

appsForm.controls.appId.value

在写入输入字段时不再更新。最初，该值正在更新。

要重新检查

表单组中的控件

，可以使用

表单控件的

如果
此.appsForm
确实是
表单组
：

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

您可以按如下所示从选择按钮触发更改事件

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


选择卡片类型
{{platform}}

在组件中，您可以编写更新函数，如下所示

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

  }

更新（值）{
如果（值）{
（this.appsForm.controls['platform']）.setValue（值，{onlySelf:false}）；
const appId=this.appsForm.controls['appId'].value；
if（this.appIdRegexes[value]）{
this.appsForm.controls['appId']=newformcontrol（appId，Validators.pattern（this.appIdRegexes[value].source））；
}
};
}

这将根据您在下拉列表中所做的选择更新验证器。
我相信这会解决您的问题。
我通过在我的平台选择字段上收听
值更改
解决了问题，然后在appId输入字段上使用
setValidators（）
方法。很有帮助

以下是我的解决方案：

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

使用补丁值更新表单this.form.patchValue（{controlTobeUpdated:value}）@user32但是
patchValue（）
只允许我更新值，而不允许更新验证器？对。patchValue（）允许您更新值，但一旦该值被更新，将启动更新验证器。现在我理解了您的问题，我提出了其他建议。我认为这只会更新验证状态，而不会更新验证器正则表达式模式。下面的文章介绍了三种实现相同功能的方法：