Angular formarray 推送表單控件

Question

在我的表單中我需要添加公司，我想在數據庫中保存我添加的公司的字符串列表，問題是formarray中公司的值始終為空

<button (click)="addNewCompany()">Add new Company</button><br><br>
<form [formGroup]="myForm">
    <div formArrayName="companies">
        <div *ngFor="let comp of getForm(); let i=index>
            <fieldset>
                <legend>
                    <h3>COMPANY {{i+1}}: </h3>
                </legend>
                <label>Company Name: </label>
                <input formControlName="comp" /><span><button (click)="deleteCompany(i)">Delete Company</button></span>
            </fieldset>
        </div>
    </div><br>
  </form>


export class AppComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      companies: this.fb.array([])
    });
  }

  getForm(): any {
    return this.myForm.get("companies")["controls"];
  }

  addNewCompany() {
    const control = <FormArray>this.myForm.get("companies");
    control.push(this.fb.control(''));
  }

  deleteCompany(index) {
    let control = <FormArray>this.myForm.controls.companies;
    control.removeAt(index);
  }

}

閃電戰

Answer 1

您還添加了 StackBlitz 演示，這真的很方便！

<input [formControlName]="i" />

由於FormArray的項目將具有索引的0, 1, 2... ，這些成為formControlName值。 您還需要使用[]表示法，否則它使用i作為字符串，而不是使用i的屬性值，例如 0, 1