提交表單時，我無法獲取 FormArray 欄位值。我在表單陣列欄位中獲取空值。
每當我點擊 addHobbies 按鈕時，我都會收到一個錯誤：找不到名稱為“0”的控制元件
注冊表格.component.html
<div >
<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
<div >
<div >
<label>Email</label>
<input type="email" formControlName="email" >
<span >Email Required</span>
</div>
</div>
<div FormArrayName="hobbies">
<div >
<div >
<button type="button" (click)="addHobbies()">Add Hobbies</button>
</div>
</div>
<div >
<div *ngFor="let hobby of hobbyControls.controls; let i=index">
{{i}}
<input type="text" [formControlName]="i">
</div>
</div>
</div>
<div >
<button type="submit" >Submit</button>
<button type="reset" >Reset</button>
</div>
</form>
</div>
注冊表格.component.ts
export class ReactiveformsComponent implements OnInit {
signupForm : FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.signupForm = this.fb.group({
'email': [''],
'hobbies': this.fb.array([])
})
}
addHobbies(){
//const hobbyControl = this FormControl('');
(<FormArray>this.signupForm.get('hobbies')).push(this.fb.control(''));
}
get hobbyControls(){
return this.signupForm.get('hobbies') as FormArray;
}
onSubmit(){
console.log(this.signupForm.value);
}
輸出
{"email":"[email protected]","hobbies":["",""]}
uj5u.com熱心網友回復：
像這樣嘗試，而不是我在這里使用愛好
<div >
<div *ngFor="let hobby of hobbyControls.controls; let i=index">
{{i}}
<input type="text" [formControlName]="hobby">
</div>
</div>
uj5u.com熱心網友回復：
有拼寫錯誤FormArrayName。
<div FormArrayName="hobbies">
...
</div>
解決方案
將其更改為formArrayName使指令起作用。
<div formArrayName="hobbies">
...
</div>
StackBlitz 上的示例解決方案
參考
角形陣列
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/327197.html
下一篇：單擊表單欄位開始輸入/覆寫現有值