我在父组件中有角反应形式,在子组件中有部分。
在子组件内部,我有一个复选框 - 当选中时 - 将打开更多字段,我希望它们全部都是必需的。
我正在使用 setValidators 但出现错误
ParentFormComponent.html:3 错误 错误:
ExpressionChangedAfterItHasBeenCheckedError:表达式已更改
检查完后。以前的值:'ng-valid:true'。当前值:
'ng-valid:假'。
在 viewDebugError (core.js:7601)
在表达式ChangedAfterItHasBeenCheckedError(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 [作为 updateRenderer] (ParentFormComponent.html:3)
在 Object.debugUpdateRenderer [作为 updateRenderer] (core.js:11087)
在 checkNoChangesView (core.js:10442)
ParentFormComponent.html:3 错误上下文 DebugContext_ {视图:对象,
nodeIndex:2,nodeDef:对象,elDef:对象,elView:对象}
这是 ParentFormComponent.html:3 行
<form [formGroup]="parentForm" (ngSubmit)="submitForm()">
这是我的代码:
<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>
并在 ts 文件中:
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);
}
我遇到了同样的问题,我通过使用修复了它AfterViewChecked
and ChangeDetectorRef
:
import { AfterViewChecked, ChangeDetectorRef } from '@angular/core'
export class ClassName implements AfterViewChecked {
constructor(private readonly changeDetectorRef: ChangeDetectorRef) {}
ngAfterViewChecked(): void {
this.changeDetectorRef.detectChanges();
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)