如何处理“表达式已被选中错误后更改”的特殊情况

Question

对于这个特定的错误，以及一些应用于它所处理的具体实现的解决方案，有很多值得阅读的地方。我不知道它将如何适用于我的。根据FormGroup是否有效，我正在更改材料扩展面板的背景色。我在一些FormGroups上有一些复选框表单控件，可以切换其他文本字段的可见性，以及它们的验证器。直到最近(也许是从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>

因此，我在复选框上调用的set验证器调用组件类中的以下函数

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()之后调用clearValidators()进行了补救，如下所示

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 lifecyle钩子中，如下所示。

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