Question

我是Angular 2的新手，正在开发一个包含表单和表格的小应用程序。表单用于输入过滤条件。用户单击“提交”按钮后，应将数据加载到表中。第一次加载时，网格应填充DB表中的所有数据。

我在home.component.html文件中使用以下代码。

＆＃13;

<div class='panel panel-primary'>

    <div class='panel-body'>

        <div class='table-responsive'>
            <!--<div style="padding-bottom:10px"><button class="btn btn-primary" (click)="addUser()">Add</button></div>-->
            <div class="alert alert-info" role="alert" *ngIf="indLoading"><img src="../../images/loading.gif" width="32" height="32" /> Loading...</div>
            <div *ngIf='warehouses && warehouses.length==0' class="alert alert-info" role="alert">No record found!</div>
            <table class='table table-striped' *ngIf='warehouses && warehouses.length'>
                <thead>
                    <tr>
                        <th>Territory Code</th>
                        <th>Warehouse Code</th>
                        <!--<th>Gender</th>-->
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let warehouse of warehouses">
                        <td>{{warehouse.TerritoryCode}}</td>
                        <td>{{warehouse.WarehouseCode}}</td>

                        <!--<td>
                            <button title="Edit" class="btn btn-primary" (click)="editUser(user.Id)">Edit</button>
                            <button title="Delete" class="btn btn-danger" (click)="deleteUser(user.Id)">Delete</button>
                        </td>-->
                    </tr>
                </tbody>
            </table>
            <div>
            </div>
        </div>
        <div *ngIf="msg" role="alert" class="alert alert-info alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="sr-only">Error:</span>
            {{msg}}
        </div>
    </div>
</div>

＆＃13;

正在加载数据，没有问题如下。

但是，当我使用下面的代码将表单控件添加到home.component.html文件时（将此代码粘贴到home.component.html的顶部）

＆＃13;

<div class="container">
    <h1>Search</h1>
    <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value, myForm.valid)">
        <div class="form-group">
            <label for="">Territory</label>
            <input type="text" class="form-control" formControlName="Territory">
            <small [hidden]="myForm.controls.Territory.valid || (myForm.controls.Territory.pristine && !submitted)" class="text-danger">
                Territory is required (minimum 5 characters).
            </small>
            <!--<pre class="margin-20">{{ myForm.controls.Territory.errors | json }}</pre>-->
        </div>
               
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

＆＃13;

输出如下。它不显示表中的数据（第一次加载时）。可能是什么原因？

Answer 1

您需要在此处使用FormArray作为数据，因此您对表单的构建应如下所示：

this.myForm = this.fb.group({
  warehouses: this.fb.array([])
})

我喜欢在从后端获取数据后填写表单，这就是我假设您从中获取数据的内容，因此在回调（订阅）调用setWarehouses中，看起来像这样，我们在哪里迭代您收到的仓库，并为每个对象创建一个包含两个属性的表单组。

setWarehouses(){
  let control = <FormArray>this.myForm.controls.warehouses;
  this.warehouses.forEach(x => {
    control.push(this.fb.group({territoryCode: x.TerritoryCode, warehouseCode: x.WarehouseCode}))
  })
}

然后你的模板应该是这样的：

<form [formGroup]="myForm">
  <!-- the formarray -->
  <table formArrayName="warehouses">
    <tr>
      <th>Territory Code</th>
      <th>Warehouse Code</th>
    </tr>
   <!-- Iterate the formGroups in the form array -->
   <tr *ngFor="let warehouse of myForm.controls.warehouses.controls; let i=index">
    <!-- Each form group has a index -->
    <ng-container formGroupName="{{i}}">
      <!-- The form controls -->
      <td><input formControlName="territoryCode" /></td>
      <td><input formControlName="warehouseCode" /></td>
    </ng-container>
  </tr>
  </table>
</form>

<强> DEMO

添加表单后，Angular 2表加载为空

1 个答案: