Angular 2:在valueChanges之后更新FormControl验证器

Question

有没有办法更新ValidtorsFormControl对象？我有FormGroup一个输入是一个选择字段,当选择字段的值更改时,我希望我的FormGroup中的另一个FormControl更改验证器.

这是我的subscribeToFormChanges()FormGroup组件的方法:

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

我通过收听valueChanges我的平台选择字段解决了这个问题,然后setValidators()在appId输入字段上使用该方法.这篇文章非常有帮助.

这是我的解决方案:

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

Answer 2

重新检查内部的控件FormGroup，你可以做的事情updateValueAndValidity的FormControl。

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

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