Question

如果用户选择1则选择菜单，然后我必须显示一个表格，或者如果用户选择2，我必须显示2个相同的表格，但如果我在推送3之后按2个表格，则显示总共5个表格。我到现在为止尝试过什么

<select (change)="selectedvalue($event.target.value)">
  <option *ngFor="let num of number" [value]="num.num">{{num.num}}</option>
</select>
<br>
<br>

<div class="container">

    <form [formGroup]="myForm">

        <div formArrayName="addresses" >
            <div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default">

                <div [formGroupName]="i" class="myform">
                    <label>street</label>
                    <input type="text" class="form-control" formControlName="street"><br><br>
                    <label>postcode</label>
                    <input type="text" class="form-control" formControlName="postcode">
                </div><br><br>
            </div>
        </div><br><br>
            <pre>form value: <br>{{myForm.value | json}}</pre>
    </form>

</div>

您可以在此处查看完整的工作示例https://stackblitz.com/edit/angular-bd8bsq?file=app%2Fapp.component.ts

提前致谢。

Answer 1

将您的代码修改为：

selectedvalue(e) {
    const control = <FormArray>this.myForm.controls['addresses'];
    this.clearFormArray(control);
    for (var i = 0; i < e; i++) {      
        control.push(this.initAddress());
    }
}

clearFormArray = (formArray: FormArray) => {
    while (formArray.length !== 0) {
        formArray.removeAt(0)
    }
}

在推送元素之前，你必须清除FormArray。

Answer 2

你应该检查还有多少表格，然后追加剩余的表格数量。

  selectedvalue(e) {
    for (var i = 0; i < e; i++) {
      const control = <FormArray>this.myForm.controls['addresses'];      
      control.push(this.initAddress());
    }
  }

在上述方法中，您只需添加更多2个表单，而不是仅添加1个，因为您已经拥有1个。

selectedvalue(e) {
        let existingLen = <FormArray>this.myForm.controls['addresses'];
        for (var i = 0; i < (e - existingLen.length); i++) {
          const control = <FormArray>this.myForm.controls['addresses'];      
          control.push(this.initAddress());
        }
}

这应该是你的方法。

注意：使用此方法，您还需要处理表单数量的减少。

Answer 3

根据所选号码添加/删除。以下代码从末尾添加/删除forms。

    if(e < control.length) {
      for (let i = control.length - 1; i >= e ; i--) {
        control.removeAt(i);
      }      
    } else {
      let moreRequired = e - control.length;
      for (let i = 1; i <= moreRequired ; i++) {
        control.push(this.initAddress());
      }
    }

根据用户输入循环表单数组

3 个答案: