检查后表情发生了变化.以前的值:'ng-valid:true'.当前值:'ng-valid:false' [英] Expression has changed after it was checked. Previous value: 'ng-valid: true'. Current value: 'ng-valid: false'

问题描述

我在父组件和子组件内的部分中有角反应形式.

在子组件内，我有一个复选框 - 当它被选中时 - 更多字段打开，我希望它们都是必需的.

我正在使用 setValidators，但出现错误

<块引用>

ParentFormComponent.html:3 ERROR 错误:ExpressionChangedAfterItHasBeenCheckedError:表达式已更改检查完之后.以前的值:'ng-valid:true'.当前值:'ng-valid:假'.在 viewDebugError (core.js:7601)在 expressionChangedAfterItHasBeenCheckedError (core.js:7589)在 checkBindingNoChanges (core.js:7691)在 checkNoChangesNodeInline (core.js:10560)在 checkNoChangesNode (core.js:10541)在 debugCheckNoChangesNode (core.js:11144)在 debugCheckRenderNodeFn (core.js:11098)在 Object.eval [as updateRenderer] (ParentFormComponent.html:3)在 Object.debugUpdateRenderer [作为 updateRenderer] (core.js:11087)在 checkNoChangesView (core.js:10442)

ParentFormComponent.html:3 ERROR CONTEXT DebugContext_ {view: Object,nodeIndex: 2, nodeDef: Object, elDef: Object, elView: Object}

这是ParentFormComponent.html:3的那一行

这是我的代码:

DB<input #db type="checkbox" name="db" (change)="checkValue(db.name, db.checked)"><span class="checkmark"></span><div *ngIf="db.checked" formGroupName="_monitorDB"><mat-form-field><input matInput placeholder="服务器名称" formControlName="服务器名称"></mat-form-field><mat-form-field><input matInput placeholder="DataBase name" formControlName="DbName"></mat-form-field><mat-form-field><input matInput placeholder="表名" formControlName="DB_tableName"></mat-form-field><mat-form-field><input matInput placeholder="port" formControlName="DbPort"></mat-form-field><mat-form-field><input matInput placeholder="查询" formControlName="查询"></mat-form-field><mat-form-field><input matInput placeholder="权限" formControlName="权限"></mat-form-field>

在 ts 文件中:

checkValue(name:string, event: any){如果(事件 == 真){this.test.push(name);如果(名称==db"){this.childForm.get('_monitorDB').get('ServerName').setValidators([Validators.required]);this.childForm.get('_monitorDB').get('DbName').setValidators([Validators.required]);this.childForm.get('_monitorDB').get('DB_tableName').setValidators([Validators.required]);this.childForm.get('_monitorDB').get('DbPort').setValidators([Validators.required]);this.childForm.get('_monitorDB').get('Query').setValidators([Validators.required]);this.childForm.get('_monitorDB').get('Premissions').setValidators([Validators.required]);}}别的{const index: number = this.test.indexOf(name);如果(索引！== -1){this.test.splice(index, 1);如果(名称==db"){this.childForm.get('_monitorDB').get('ServerName').clearValidators();this.childForm.get('_monitorDB').get('ServerName').updateValueAndValidity();this.childForm.get('_monitorDB').get('DbName').clearValidators();this.childForm.get('_monitorDB').get('DbName').updateValueAndValidity();this.childForm.get('_monitorDB').get('DB_tableName').clearValidators();this.childForm.get('_monitorDB').get('DB_tableName').updateValueAndValidity();this.childForm.get('_monitorDB').get('DbPort').clearValidators();this.childForm.get('_monitorDB').get('DbPort').updateValueAndValidity();this.childForm.get('_monitorDB').get('Query').clearValidators();this.childForm.get('_monitorDB').get('Query').updateValueAndValidity();this.childForm.get('_monitorDB').get('Premissions').clearValidators();this.childForm.get('_monitorDB').get('Premissions').updateValueAndValidity();}}}this.checkboxArr.emit(this.test);}

解决方案

我遇到了同样的问题，我使用 AfterViewChecked 和 ChangeDetectorRef 修复了它:

import { AfterViewChecked, ChangeDetectorRef } from '@angular/core'导出类 ClassName 实现 AfterViewChecked {构造函数(私有只读 changeDetectorRef: ChangeDetectorRef){}ngAfterViewChecked(): 无效 {this.changeDetectorRef.detectChanges();}}

I have angular reactive form in parent component and sections inside childrens component.

Inside the child component I have a checkbox - when its checked - more fields open and I want them all to be required.

I am using setValidators but I'm getting error

ParentFormComponent.html:3 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-valid: true'. Current value: 'ng-valid: false'. at viewDebugError (core.js:7601) at expressionChangedAfterItHasBeenCheckedError (core.js:7589) at checkBindingNoChanges (core.js:7691) at checkNoChangesNodeInline (core.js:10560) at checkNoChangesNode (core.js:10541) at debugCheckNoChangesNode (core.js:11144) at debugCheckRenderNodeFn (core.js:11098) at Object.eval [as updateRenderer] (ParentFormComponent.html:3) at Object.debugUpdateRenderer [as updateRenderer] (core.js:11087) at checkNoChangesView (core.js:10442)

ParentFormComponent.html:3 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 2, nodeDef: Object, elDef: Object, elView: Object}

this is the line of ParentFormComponent.html:3

 <form [formGroup]="parentForm" (ngSubmit)="submitForm()">

Here is my code:

<label class="container">DB
    <input #db type="checkbox" name="db" (change)="checkValue(db.name, db.checked)"> 
    <span class="checkmark"></span>
</label>

<div *ngIf="db.checked" formGroupName="_monitorDB">
    <mat-form-field>
        <input matInput placeholder="Server name" formControlName="ServerName">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="DataBase name" formControlName="DbName">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="table name" formControlName="DB_tableName">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="port" formControlName="DbPort">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="Query" formControlName="Query">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="Permissions" formControlName="Premissions">
    </mat-form-field>

</div>

and in the ts file:

checkValue(name:string, event: any){
    if (event == true){
      this.test.push(name);
      if (name =="db"){
         this.childForm.get('_monitorDB').get('ServerName').setValidators([Validators.required]);
         this.childForm.get('_monitorDB').get('DbName').setValidators([Validators.required]);
         this.childForm.get('_monitorDB').get('DB_tableName').setValidators([Validators.required]);
         this.childForm.get('_monitorDB').get('DbPort').setValidators([Validators.required]);
         this.childForm.get('_monitorDB').get('Query').setValidators([Validators.required]);
         this.childForm.get('_monitorDB').get('Premissions').setValidators([Validators.required]);

      }

    }

    else{
      const index: number = this.test.indexOf(name);
      if (index !== -1) {
          this.test.splice(index, 1);
          if (name =="db"){
            this.childForm.get('_monitorDB').get('ServerName').clearValidators();
            this.childForm.get('_monitorDB').get('ServerName').updateValueAndValidity();
            this.childForm.get('_monitorDB').get('DbName').clearValidators();
            this.childForm.get('_monitorDB').get('DbName').updateValueAndValidity();
            this.childForm.get('_monitorDB').get('DB_tableName').clearValidators();
            this.childForm.get('_monitorDB').get('DB_tableName').updateValueAndValidity();
            this.childForm.get('_monitorDB').get('DbPort').clearValidators();
            this.childForm.get('_monitorDB').get('DbPort').updateValueAndValidity();
            this.childForm.get('_monitorDB').get('Query').clearValidators();
            this.childForm.get('_monitorDB').get('Query').updateValueAndValidity();
            this.childForm.get('_monitorDB').get('Premissions').clearValidators();
            this.childForm.get('_monitorDB').get('Premissions').updateValueAndValidity();
          }
      }      
    }

     this.checkboxArr.emit(this.test);
 }

解决方案

I faced the same issue and I fixed it by using AfterViewChecked and ChangeDetectorRef:

import { AfterViewChecked, ChangeDetectorRef } from '@angular/core'

export class ClassName implements AfterViewChecked {
  constructor(private readonly changeDetectorRef: ChangeDetectorRef) {}

  ngAfterViewChecked(): void {
    this.changeDetectorRef.detectChanges();
  }
}

这篇关于检查后表情发生了变化.以前的值:'ng-valid:true'.当前值:'ng-valid:false'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！