表单数组返回空值?

Question

Greeting。我尝试了多种方法，但没有一种有效。我现在正在讨论这个问题。我需要启动表单电子邮件数组

email: [testestest]

但我得到了：

email: [testestest]

但是我的电子邮件返回n点击。检查我的 ts

和我的html：

Answer 1

Alex，你有一个 FormControls 的 Form Array，而不是 formGroups 的 Form Array。所以你.html一定像

<form *ngIf="addForm" [formGroup]="addForm">
<div class="form-control-row" formArrayName="email"
*ngFor="let item of addForm.get('email').controls; let i = index;">
<div class="input-box">
<input type="text" placeholder="E - mail" [formControlName]="i">
<img src="../../assets/Delete.svg" alt="x-icon">
</div>
</div>
</form>

看到您没有 [fomGroupName]="i"，并且您使用 [formControlName]="i">

另一种方式是

<form *ngIf="addForm" [formGroup]="addForm">
<div class="form-control-row" formArrayName="email"
*ngFor="let item of addForm.get('email').controls; let i = index;">
<div class="input-box">
<input type="text" placeholder="E - mail" [formControl]="item">
<img src="../../assets/Delete.svg" alt="x-icon">
</div>
</div>
</form>

看到在这种情况下我们使用 [formControl]="item"(item 是你在 *呋呀(

那么，你如何创建formArray？

如果您有一系列电子邮件，则可以执行

email:  this.formBuilder.array(
this.email.map(x=>this.formBuilder.control(x))
)

也就是说，你使用map创建一个FormControls数组(在FormControl中转换数组的每个元素，谁重视数组的元素。

注意：在生产中，您需要为阵列创建一个吸气剂

get emails()
{
return this.form.get('email') as FormArray;
}

并迭代

*ngFor="let item of emails.controls; let i = index;">

使用 [formGroupName]="i" 和 formControl 它与 FormGroups 的 FormArray 一起使用。

email:  this.formBuilder.array(
this.email.map(x=>this.formBuilder.group({email:x}))
)

看到在本例中转换具有 FormControl"调用"电子邮件的 formGroup 中的数组的每个元素

您可以在此堆栈闪电战中看到所有这些。我希望这个例子能帮助你理解差异

如果我们想向表单数组添加一个元素，我们可以创建一个函数

addEmail(email:any)
{
const array=this.addForm.get('email') as FormArray 
array.push(this.formBuilder.control(email)) //if is a FormArray of FormControl
const array2=this.addForm.get('email2') as FormArray
array2.push(this.formBuilder.group({email:email})) //if is a FormArray of FormGroup
}

注意：首先，如果我们想创建一个空的formArray，我们需要使用

email:  this.formBuilder.array([])

当我们想要删除数组的一个元素时，我们需要传递数组的"索引"，所以我们的函数 delete 是

delete(index:number)
{
const array=this.addForm.get('email') as FormArray
array.removeAt(index)
}

我们.html是

<div class="input-box">
<input type="text" placeholder="E - mail" [formControl]="item">
<img src="../../assets/Delete.svg" alt="x-icon" (click)="delete(i)">
</div>