FormArray 返回空值？

Question

问候。我尝试了多种方法，但没有一种方法有效。我在这，现在。我需要发起一个 formArray 的电子邮件

email: [testestest]

但我得到了：

email: [testestest]

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

还有我的html：

Answer 1

Alex，你有一个 FormControls 的表单数组，而不是一个 formGroups 的表单数组。所以你的 .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 是您在 *ngFor)

那么，如何创建 formArray？

如果您有一系列电子邮件，您可以这样做

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

这就是你使用map创建了一个FormControls数组（在一个FormControl中转换数组的每个元素谁值数组的元素。

注意：在生产中，您需要为数组创建一个 getter

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

然后迭代

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

[formGroupName]="i" 和 formControl 的使用与 FormGroup 的 FormArray 一起使用。例如你可以有

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

请参阅在这种情况下，将数组的每个元素转换为具有 FormControl“称为”电子邮件的 formGroup 中的每个元素

您可以在stackblitz 中看到这一切。我希望这个例子能帮助你理解其中的区别

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

  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>