我正在嘗試創建一個包含這種型別的表單：
表單組
表單控制元件
表單控制元件
表單陣列
表單組
表單控制元件
表單控制元件
當我單擊按鈕添加反應性欄位并在填寫后提交表單時，第一個欄位不包含任何資料。我得到這個錯誤：
ERROR 錯誤：找不到帶有路徑的控制元件：“電子郵件 -> 0 -> 電子郵件”
和
ERROR 錯誤：找不到帶有路徑的控制元件：'電子郵件 -> 0 -> 發送'
app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent{
profileForm = this.fb.group({
firstName: [''],
lastName: [''],
address: this.fb.group({
street: [''],
city: [''],
state: [''],
}),
emails: this.fb.array([''])
});
get emails() {
return this.profileForm.get('emails') as FormArray;
}
addEmail() {
this.emails.push(this.fb.group({
email:[''],
send:['']
}));
}
constructor(private fb: FormBuilder){}
public submit():void{
console.log(this.profileForm.value);
}
}
app.component.html
<form [formGroup]="profileForm" (ngSubmit)="submit()">
<div>
<label>firstName</label>
<input type="text" formControlName="firstName">
</div>
<div>
<label>lastName</label>
<input formControlName="lastName" type="text">
</div>
<div formGroupName="address">
<label>Adresse</label>
<label>street</label><input formControlName="street" type="text">
<label>city</label><input formControlName="city" type="text">
<label>state</label><input formControlName="state" type="text">
</div>
<div formArrayName="emails">
<h2>Aliases</h2>
<button type="button" (click)="addEmail()"> Add another alias</button>
<div [formGroupName]="i" *ngFor="let e of emails.controls; let i=index;">
<div>
<label>email:</label>
<input type="text" formControlName="email">
<input type="checkbox" formControlName="send">
</div>
</div>
</div>
<button type="submit" [disabled]="!profileForm.valid">Submit</button>
</form>
uj5u.com熱心網友回復：
采用
emails: this.fb.array([])
代替
emails: this.fb.array([''])
StackBlitz 上的示例演示
參考
使用 FormArray 創建就地可編輯表
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/437540.html