我正在嘗試在一個組件中創建許多表單。我試圖用mat-tab-groups來實作這個
<mat-tab-group>
<mat-tab label="form1">
<form>...</form>
</mat-tab>
<mat-tab label="form2">
<form>...</form>
</mat-tab>
</mat-tab-group>
我有這些在 ts 中創建表單的函式：
createForm1(){
this.form = this.formBuilder.group({
field1: [''],
field2: [''],
...
})
}
createForm2(){
this.form = this.formBuilder.group({
field1: [''],
field2: [''],
...
})
}
我在建構式中呼叫了這個函式：
constructor(some dependencies){
this.createForm1;
this.createForm2;
}
但是，當呼叫 createForm2() 時，它會崩潰。如果我更改順序，則創建 form2 并且 form1 崩潰。錯誤是ERROR Error: Cannot find control with name: someField。
我猜該錯誤與選項卡有關（只能創建活動選項卡的形式），但我不知道如何解決。
更多資訊
在 html 中，可以通過以下方式訪問控制元件：
<div ><input type="number" formControlName="field1" /></div>
<div ><input type="number" formControlName="field2" /></div>
uj5u.com熱心網友回復：
我認為你錯過了幾件事。
我使用上面給出的詳細資訊創建了一個 stackblitz，它們可以正常作業。 https://stackblitz.com/edit/angular-4y6edt
您還應該告訴它系結到相關的表單組<form>。[formGroup]
<form [formGroup]="form1">
<div class="form-group">
<input type="number" formControlName="field1" class="form-control" />
</div>
<div class="form-group">
<input type="number" formControlName="field2" class="form-control" />
</div>
</form>
</mat-tab>
<mat-tab label="form2">
<form [formGroup]="form2">
<div class="form-group">
<input type="number" formControlName="field1" class="form-control" />
</div>
<div class="form-group">
<input type="number" formControlName="field2" class="form-control" />
</div>
</form>
在您的.ts組件中，您將兩次初始化相同的組件：
createForm1(){
this.form = this.formBuilder.group({
field1: [''],
field2: [''],
...
})
}
createForm2(){
this.form = this.formBuilder.group({
field1: [''],
field2: [''],
...
})
}
你應該有兩個不同的formGroups即form1和form2，像這樣：
createForm1() {
this.form1 = this.formBuilder.group({
field1: [''],
field2: [''],
});
}
createForm2() {
this.form2 = this.formBuilder.group({
field1: [''],
field2: [''],
});
}
最后在你的建構式中呼叫它們，如下所示：
constructor(private formBuilder: FormBuilder) {
this.createForm1();
this.createForm2();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/431284.html