angular - 如何处理我的 "expression has changed after it has been checked error"特殊情况

Question

关于这个特定错误，还有一些适用于它所解决的特定实现的解决方案，有很多值得阅读的内容。我不知道它如何适用于我的。我正在根据 FormGroup 是否有效来更改 Material 扩展面板的背景颜色。我在某些 FormGroup 上有一些复选框表单控件，可以切换其他文本字段及其验证器的可见性。直到最近(也许从 4.4.3 更新到 4.4.6 后)，这都运行良好。然而，现在，在先前有效的表单组中的控件上切换验证会引发表达式在检查后已更改错误。

    <md-expansion-panel [expanded]="step===1" (opened)="setStep(1)" [ngStyle]="{'background': changeForm.get('changeOverviewFG').valid && changeForm.get('changeOverviewFG').touched ?'#cffccf' :'#fff'}">
    <div class="row">
        <div class="col-xs-12 col-sm-12">
            <h4>Type of Change</h4>
        </div>
        <div class="col-xs-12 col-sm-6">
            <input type="checkbox" formControlName="srvCheck" (click)="setValidator(changeForm.get('changeOverviewFG.srvCheck'),[changeForm.get('changeOverviewFG.srvPackage')])">SRV Package
        </div>
   </div>
   <div class="row">
         <div *ngIf="changeForm.get('changeOverviewFG.srvCheck').value">
              <div class="form-group" [ngClass]="{'td-group-error': displayMessage.srvPackage }">
                    <textarea class="form-control" rows="2" formControlName="srvPackage" placeholder="Description/Name if known" style="width:100%"> </textarea>
                    <div class="error-block" *ngIf="displayMessage.srvPackage" role="alert" style="color: #ae0101">
                          <strong>!</strong> {{displayMessage.srvPackage}}
                    </div>
              </div>
         </div>
   </div>

因此，我的 setvalidator 调用我的复选框，并从我的组件类中调用以下函数

setValidator(c: FormControl, d: [FormControl]) {
    if (!c.value) {
      d.forEach(element => {
        element.setValidators(Validators.required);
      });

    } else {
      d.forEach(element => {
        element.clearValidators();
      });
    }
  }

此部分的错误发生在 [ngStyle] 的第一行，该行根据 formGroup 是否有效更改背景颜色。谁能告诉我如何正确处理它检查更改的方式？

我试图理解的引用文献之一是 this one但我不知道它如何与模板中有关 [ngStyle] 的实例一起使用。

Answer 1

我终于弄清楚了。我的问题是双重的。一是我没有正确清除验证器，我通过在clearValidators()之后调用updateValueAndValidity()来解决这个问题，如下所示

setValidator(c: FormControl, d: [FormControl]) {
if (!c.value) {
  d.forEach(element => {
    element.setValidators(Validators.required);
  });

} else {
  d.forEach(element => {
    element.clearValidators();
    element.updateValueAndValidity();
  });
}
}

其次，模板中的 [ngStyle] 属性和逻辑导致表达式在检查错误后发生更改。我将逻辑移至 ngAfterContentChecked 生命周期 Hook ，如下所示。

  ngAfterContentChecked(): void {
if (this.changeForm.get('changeOverviewFG').valid && this.changeForm.get('changeOverviewFG').touched) {
  this.changeOverviewColor = '#cffccf';
} else {
  this.changeOverviewColor = '#fff';
}
}

然后在模板中将属性标签改为如下

<md-expansion-panel class="changeOverviewFGpanel" [expanded]="step===1" (opened)="setStep(1)" [style.background]="changeOverviewColor">