Question

我是Angular的新手，我正在尝试实现动态表单（表单内的表单）。

我想要实现的是。

单击加号按钮时，应添加子下拉部分，如果我单击Add another Mapping，则应显示while单框。

我的HTML文件：

<div class="tab-pane" id="tab_3">
   <form [formGroup]="attrForm" novalidate (ngSubmit)="save(attrForm)">
      <div formArrayName="schemaAttr">
        <div *ngFor="let address of attrForm.controls.schemaAttr.controls; let i=index" class="panel panel-default">
          <div class="panel-heading">
            <span>Schemas {{i + 1}}</span>
            <span class="glyphicon glyphicon-remove pull-right" *ngIf="attrForm.controls.schemaAttr.controls.length > 1" (click)="removeschmeAttr(i)"></span>
          </div>

          <div class="panel-body" [formGroupName]="i">
            <div class="form-group col-xs-3">
            <ng-select [items]="configuredSchema" [closeOnSelect]="true"  bindLabel="name" placeholder="Choose a schema" (change)="onChange($event)" [(ngModel)]="selectedschema1">
            </ng-select>   
            </div>

            <div class="form-group col-xs-3">
              <ng-select [items]="configuredSchema" [closeOnSelect]="true"  bindLabel="name" placeholder="Choose a schema" (change)="onChange2($event)" [(ngModel)]="selectedschema2">
            </ng-select>
            </div>
          </div>

          <div class="panel-body" [formGroupName]="i">
            <form [formGroup]="addattrForm" novalidate>
              <div formArrayName="addAttr">
                <div *ngFor="let attribute of addattrForm.controls.addAttr.controls; let i=index" class="row">
                  <div class="form-group col-xs-3 col-md-6 col-lg-3">
                    <select [(ngModel)] ="selectedattribute1">
                     <option *ngFor="let attribute of attributes1" value={{attribute}} >
                        {{attribute}}
                      </option>
                    </select>
                  </div>

                  <div class="form-group col-xs-3 col-md-6 col-lg-3">
                    <select [(ngModel)] ="selectedattribute2" >
                     <option *ngFor="let attribute of attributes2" value={{attribute}} >
                        {{attribute}}
                      </option>
                    </select>
                  </div>

                  <div class="margin-20">
                    <a (click)="addAttr()" style="cursor: default">
                    +
                    </a>
                  </div>
                </div>
              </div>
            </form>                
          </div>

      <div class="margin-20">
        <a (click)="addschmeAttr(addattrForm)" style="cursor: default">
         Map Another schema +
        </a>
      </div>
    </div>
  </div>

      <div class="margin-20">
        <button type="submit" class="btn btn-primary pull-right" [disabled]="!attrForm.valid">Submit</button>
      </div>
  </form>

但是我没有得到正确的输出，如果我单击Add Another Mapping选项，以前映射的dropcount会显示为空子下拉列表，请提出一些更好的想法来实现这一目标。

Answer 1

我无法理解您要使用子下拉菜单的加号按钮。但是对于“添加另一个映射”：

//In your HTML
<div class="box" *ngFor="let array of myArray">
  <p>
    <label for="firsName">First Name:</label>
    <input type="textarea"/>
  </p>
  <p>
    <label for="firsName">Second Name:</label>
    <input type="textarea"/></p>
  <p>
    <label for="firsName">Last Name:</label>
    <input type="textarea"/>
  </p>
</div>

// Change the field as per your requirement.

<button (click)="addMoreBox()">Add More</button>
<button (click)="removeBox()">Delete Box</button>

// In your controller/Typescript.
  myArray = ['122'];


  addMoreBox() {
    this.myArray.push('something got push');
  }

  removeBox() {
    this.myArray.pop();
  }

这里的关键思想是利用* ngFor。

重要

对于该示例，我只是将一个字符串推入数组中，但是对于您而言，我相信您应该插入一些重要的信息来跟踪映射。

You can play here for more.

Answer 2

尽管我会尽力做出更好，更详尽的回应，但我觉得我无法比这个项目做得更好 https://stackblitz.com/edit/deep-nested-reactive-form?file=app%2Fapp.component.html

我建议按照https://stackblitz.com/@rahulrsingh09创建的惊人示例进行工作，它相当简单易懂。

这是嵌套表单的一个漂亮示例，也是我后来设法创建自己的动态嵌套表单的原因。

表格内的表格+ angular5

2 个答案: