如何处理我的特殊情况“表达式已被检查错误后更改". [英] How to handle my particular case of "expression has changed after it has been checked error"

问题描述

关于此特定错误，还有很多要阅读的内容，还有一些针对该特定错误的解决方案.我不知道它将如何适用于我的.我正在根据FormGroup是否有效来更改材料扩展面板的背景颜色.我在某些FormGroup上具有一些复选框表单控件，这些控件可切换其他文本字段及其验证器的可见性.直到最近(可能是从4.4.3升级到4.4.6)，它仍然可以正常工作.但是，现在，在以前有效的表单组中的控件上进行切换验证会抛出表达式，但在检查错误后已更改.

There was lots to read about this particular error, as well as some solutions floating around that applied to the specific implementation it was addressing. I have no idea how it would apply to mine. I am changing the background color of a material expansion panel based on whether the FormGroup is valid. I have some checkbox form controls on some of the FormGroups that toggle the visibility of other textfields, and also their validators. Up until recently (perhaps upon updating from 4.4.3 to 4.4.6) this worked fine. Now, however, toggling validation on a control in a previously valid formgroup throws the expression has changed after it has been checked error.

    <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调用我的复选框时，会从组件类中调用以下函数

So my setvalidator calls on my checkboxes call the following function from my component class

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

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

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

The error for this section occurs on the very first line with the [ngStyle] that changes the background color depending on whether the formGroup is valid. Can anyone tell me how I can properly handle how it's checking for changes?

我试图弄清的参考文献之一是

One of the references I was trying to make sense of was this one but I don't know how it would work with my instance concerning [ngStyle] in the template.

推荐答案

我最终弄明白了.我的问题是双重的.其中之一是我没有正确清除验证器，我通过在clearValidators()之后调用updateValueAndValidity()进行补救，如下所示

I ended up figuring it out. My problem was twofold. One was my not properly clearing validators, which I remedied by calling updateValueAndValidity() after clearValidators() as demonstrated below

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钩，如下所示.

Secondly, something about the [ngStyle] attribute and logic being in the template was causing the expression changed after checked error. I moved the logic to the ngAfterContentChecked lifecyle hook as demonstrated below.

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

然后将属性标签更改为模板中的以下内容

And then changed the attribute tag to the following in the template

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

这篇关于如何处理我的特殊情况“表达式已被检查错误后更改".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！