angular - 形式中的形式 + angular5

Question

我是 Angular 部分的新手，我正在尝试实现动态表单(表单中的表单)。

我想要实现的是。

当点击加号按钮时，应该添加子下拉部分，如果我点击 Add another Mapping，应该会出现 while single box。

我的 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.