FormArray return 为空？

Question

您好。我尝试了多种方法，但其中 none 行得通。我正在处理这个，现在。我需要启动一个 formArray of emails

email: [testestest]

但是我得到了：

email: [testestest]

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

还有我的html：

Answer 1

Alex，您有一个 FormControl 的表单数组，而不是 formGroup 的表单数组。所以你 .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 中，FormControl 为数组的元素赋值。

注意：在生产中你需要为数组

创建一个getter

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 "called" 电子邮件

的 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([])

当我们要删除数组的一个元素时，需要传入数组的"index"，所以我们的函数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>

FormArray return 为空？

FormArray return null?

forms

typescript

angular

formarray