我有一個從 WebAPI 加載的問題串列。根據 questionType，答案是單選選項/文本。現在我想驗證我的答案（必需/自定義驗證器）。在 webAPI 回傳問題串列后，我將 formcontrol 動態添加到 formgroup。
錯誤 - NG0100：ExpressionChangedAfterItHasBeenCheckedError：運算式在檢查后已更改。以前的值：'[object Object]'。當前值：'未定義'..
如果 *ngIf="questionForm" 從 html 中洗掉，則 Error - formGroup 需要一個 FormGroup 實體。請傳一份進去。
據我了解，創建了表單組實體，并在角度生命周期的某個地方再次將其重新加載為未定義。
.html
<form *ngIf="questionForm" [formGroup]="questionForm">
<ng-container *ngFor="let item of Questions;let i = index;">
<mat-label >{{item.question}}</mat-label>
<div [ngSwitch]="item.questionType">
<div *ngSwitchCase="'bool'">
<mat-radio-group aria-
label="Select an option">
<mat-radio-button id="YesAnswer_{{item.id}}"
#Answer_{{item.id}}
name="Answer_{{item.id}}" value="1"
formControlName="Answer_{{item.id}}">Yes</mat-radio-
button>
<mat-radio-button id="NoAnswer_{{item.id}}"
#Answer_{{item.id}}
name="Answer_{{item.id}}" value="0"
formControlName="Answer_{{item.id}}">No</mat-radio-
button>
</mat-radio-group>
</div>
<div *ngSwitchCase="'string'">
<mat-form-field appearance="outline">
<input matInput type="text"
id="Answer_{{item.id}}" #Answer_{{item.id}}
formControlName="Answer_{{item.id}}"
name="Answer_{{item.id}}">
</mat-form-field>
</div>
</div>
</ng-container>
</form>
.ts 檔案ngOnInit() 方法。this.Questions 包含來自 WebAPI 的問題串列，我確保以下代碼僅在加載問題后運行。添加 console.log(this.questionForm); 此陳述句下方顯示了 FormGroup 中的控制元件串列。
ngOnInit():void{
this.service.GetQuestion().subscribe({
error: (err) => { console.log(err); },
next: (data) => {
if (data) {
this.Questions = data as Questions[];
this.questionForm = new FormGroup ({});
this.Questions.forEach(quest=>{
this.questionForm.addControl('Answer_' String(quest.id),new FormControl( '',
[Validators.required]));
});
}
uj5u.com熱心網友回復：
嘗試將介面的名稱重命名Questions為Question
好吧，我想說的是，當您使用 mat-radio-group 時，這就是您使用 formControlName 的地方。順便說一句，我不太喜歡使用插值，使用系結，并且您錯誤地放置了標簽。
這是我的 .html
<form *ngIf="questionForm" [formGroup]="questionForm">
<ng-container *ngFor="let item of Questions; let i = index">
<div [ngSwitch]="item.questionType">
<div *ngSwitchCase="'bool'">
<mat-label>{{ item.question }}</mat-label>
<div>
<mat-radio-group
[formControlName]="'Answer_' item.id"
aria-label="Select an option"
>
<mat-radio-button value="1">Yes</mat-radio-button>
<mat-radio-button value="0">No</mat-radio-button>
</mat-radio-group>
</div>
</div>
<div *ngSwitchCase="'string'">
<mat-form-field appearance="outline">
<mat-label>{{ item.question }}</mat-label>
<input matInput type="text" [formControlName]="'Answer_' item.id" />
</mat-form-field>
</div>
</div>
</ng-container>
</form>
還有一個可以作業的stackblitz（而且是你的代碼-嗯，我逐個更改界面問題）
順便說一句，當您使用 FormControls 的 FormArray 時，您只能在您需要的 FormControls 中使用驗證器 - 而不是在整個 FormArray 中 -
uj5u.com熱心網友回復：
修復了問題...這不是創建動態表單組的問題，它是我宣告表單組的地方...
我在這個父組件中有一個子組件，并使用 @ViewChild 裝飾器作為子組件參考。當我宣告我的表單組時，我將這兩個陳述句放在了這兩個陳述句之間，我忽略了它并導致了所有錯誤。
@ViewChild('myChild')
public myChildControl: MyChildComponent;
通過錯誤地放置我的表單組宣告，如下所示
@ViewChild('myChild')
questionForm: FormGroup =new FormGroup({});
public myChildControl: MyChildComponent;
將它移到我的子組件參考下方修復了錯誤。
感謝 Eliseo 的意見。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496901.html