forms - removeAt() 上的输入中的 Angular 4 表单数组值不正确

Question

我创建了一个Plunker来演示这个问题

https://embed.plnkr.co/pgu7szf9ySwZSitOA5dq/

如果您删除 #2，您会看到 #5 在最后两个框中出现两次。我无法弄清楚为什么会这样。

Answer 1

你应该嵌套你的 FormArray在 FormGroup像这样:

export class AppComponent implements OnInit {
    public formG: FormGroup;
    public formArray: FormArray;

    constructor(private fb: FormBuilder) { }

    ngOnInit() {
      this.createForm(); 
    }


    createForm() {
      this.formArray = this.fb.array([
        this.fb.control(1),
        this.fb.control(2),
        this.fb.control(3),
        this.fb.control(4),
        this.fb.control(5),
      ]);
      this.formG = this.fb.group({
        farray: this.formArray
      });
      console.log(this.formArray);
    }

    addQuestion() {
      this.formArray.push(this.fb.control(''));
    }

    removeQuestion(i) {
      this.formArray.removeAt(i);
    }
}

和模板:

<div class="container" [formGroup]="formG">
  <div formArrayName="farray">
    <div class="row form-inline" *ngFor="let question of formArray.controls; let i = index">
      <textarea class="form-control" [formControlName]="i"></textarea>
      <button (click)="removeQuestion(i)" class="btn btn-secondary">Remove</button>
    </div>
  </div>
</div>
<button (click)="addQuestion()" class="btn btn-secondary">Add</button>

行动中的表格: https://embed.plnkr.co/hJ0NMmzGezjMzWfYufaV/