Question

有很多关于这个特定错误的内容，以及一些应用于它正在解决的特定实现的解决方案。我不知道它将如何适用于我的。我正在根据FormGroup是否有效来更改材质扩展面板的背景颜色。我在一些FormGroup上有一些复选框表单控件，可以切换其他文本字段及其验证程序的可见性。直到最近（也许从4.4.3更新到4.4.6），这个工作正常。但是，现在，对先前有效的formgroup中的控件进行切换验证会导致表达式在检查错误后发生更改。

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

如何处理我的特定情况＆＃34;表达式在检查错误后发生了变化＆＃34;

1 个答案: