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

Question

我有 select 带有选项的菜单，如果用户 select 1 那么我必须显示一个表格，或者如果用户 select 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)
    }
}

you will have to clear FormArray before pushing elements in it.

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

Add/Remove 根据所选数字。下面的代码adds/removesforms从末尾

    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());
      }
    }

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

Loop through form array based on user input

angular

angular-reactive-forms