角4陣列的形式不正確的輸入上RemoveAt移除（）值

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/