动态地向 Angular 5 Material Form 添加一行

Question

我正在使用 Angular Material 设计一个基本表单，但我一直在尝试创建向表单添加动态行的功能。即，当我单击一行旁边的“添加”按钮时，它应该添加一个新的空行。

我已经尝试了很多方法来利用这个例子，但是我的数据要么重复，要么我的列表爆炸了：

表格代码：

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Price</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let field of fieldArray; let i = index">
      <td>
        <input [(ngModel)]="field.code" class="form-control" type="text" name="{{field.code}}" />
      </td>
      <td>
        <input [(ngModel)]="field.name" class="form-control" type="text" name="{{field.name}}" />
      </td>
      <td>
        <input [(ngModel)]="field.price" class="form-control" type="text" name="{{field.price}}" />
      </td>
      <td>
        <button mat-raised-button class="form-button-spacing" color="warn" type="button" (click)="deleteFieldValue(i)">
          Delete</button>
      </td>
    </tr>
    <tr>
      <td>
        <input class="form-control" type="text" id="newAttributeCode" [(ngModel)]="newAttribute.code" name="newAttributeCode" />
      </td>
      <td>
        <input class="form-control" type="text" id="newAttributeName" [(ngModel)]="newAttribute.name" name="newAttributeName" />
      </td>
      <td>
        <input class="form-control" type="text" id="newAttributePrice" [(ngModel)]="newAttribute.price" name="newAttributePrice"
        />
      </td>
      <td>

        <button mat-raised-button class="form-button-spacing" color="primary" type="button" (click)="addFieldValue()">
          Add</button>
      </td>
    </tr>
  </tbody>
</table>

组件代码：

private fieldArray: Array<any> = [];
private newAttribute: any = {};


addFieldValue() {
  this.fieldArray.push(this.newAttribute)
  this.newAttribute = {};
}

deleteFieldValue(index) {
  this.fieldArray.splice(index, 1);
}

如何使用下面的代码创建相同的动态添加行：

<mat-expansion-panel [expanded]="step === 4" (opened)="setStep(4)" hideToggle="true">
<mat-expansion-panel-header>
  <mat-panel-title>
    <h4>Permits</h4>
  </mat-panel-title>
  <mat-panel-description>
    <div></div>
    <mat-icon>whatshot</mat-icon>
  </mat-panel-description>
</mat-expansion-panel-header>

<div class="form">
  <form class="permits-form" #permitsForm="ngForm" (ngSubmit)=onSubmit(permitsForm)>
    <input type="hidden" name="AssetID" #AssetID="ngModel" [(ngModel)]="assetDataService.selectedAsset.AssetID">
    <table class="full-width" cellspacing="0">
      <tr>
        <td>
          <mat-form-field>
            <mat-select placeholder="Permits" id="Permits" name="Permits" #Permits="ngModel" [(ngModel)]="assetDataService.selectedAsset.Permits"
              required>
              <mat-option *ngFor="let permit of permits" [value]="permit.name" required>
                {{ permit.name }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </td>
        <td>
          <mat-form-field class="full-width">
            <input matInput placeholder="Title of Permit" id="PermitTitle" name="PermitTitle" #PermitTitle="ngModel" [(ngModel)]="assetDataService.selectedAsset.PermitTitle"
              required>
          </mat-form-field>
        </td>
        <td>
          <mat-form-field class="full-width">
            <input matInput [matDatepicker]="PermitIssueDate" placeholder="Issue Date" id="PermitIssueDate" name="PermitIssueDate" #PermitIssueDate="ngModel"
              [(ngModel)]="assetDataService.selectedAsset.PermitIssueDate" required>
            <mat-datepicker-toggle matSuffix [for]="PermitIssueDate"></mat-datepicker-toggle>
            <mat-datepicker touchUi="true" #PermitIssueDate></mat-datepicker>
          </mat-form-field>
        </td>
        <td>
          <mat-form-field class="full-width">
            <input matInput [matDatepicker]="PermitEndDate" placeholder="Expiry Date" id="PermitEndDate" name="PermitEndDate" #PermitEndDate="ngModel"
              [(ngModel)]="assetDataService.selectedAsset.PermitEndDate">
            <mat-datepicker-toggle matSuffix [for]="PermitEndDate"></mat-datepicker-toggle>
            <mat-datepicker touchUi="true" #PermitEndDate></mat-datepicker>
          </mat-form-field>
        </td>
        <td>
          <mat-icon>add_circle_outline</mat-icon>
        </td>
      </tr>
    </table>
  </form>
</div>
</mat-expansion-panel>

提前谢谢你！

Answer 1

您应该使用响应式表单，并且可以动态添加表单控件。

Answer 2

我能够通过实施以下措施来解决我的需求：

首先，在我看来，我创建了另一个 mat-table 来保存和循环我添加的行，以及获取数据源并将其分配给表：

<mat-table #table [dataSource]="getPermitDataSource()">

  <!-- Id Column -->
  <ng-container matColumnDef="permit">
    <mat-header-cell *matHeaderCellDef> Permit </mat-header-cell>
    <mat-cell *matCellDef="let permit"> {{permit.Permits}} </mat-cell>
  </ng-container>

  <!-- Make Column -->
  <ng-container matColumnDef="title">
    <mat-header-cell *matHeaderCellDef> Permet Title </mat-header-cell>
    <mat-cell *matCellDef="let permit"> {{permit.PermitTitle}} </mat-cell>
  </ng-container>

  <!-- Model Column -->
  <ng-container matColumnDef="issue">
    <mat-header-cell *matHeaderCellDef> Issue Date </mat-header-cell>
    <mat-cell *matCellDef="let permit"> {{permit.PermitIssueDate | date}} </mat-cell>
  </ng-container>

  <!-- Regitration Column -->
  <ng-container matColumnDef="expiry">
    <mat-header-cell *matHeaderCellDef> Expiry Date </mat-header-cell>
    <mat-cell *matCellDef="let permit"> {{permit.PermitEndDate | date}} </mat-cell>
  </ng-container>

  <!-- actions -->
  <ng-container matColumnDef="actions">
    <mat-header-cell *matHeaderCellDef>Edit | Delete</mat-header-cell>

    <mat-action-row>
      <mat-cell *matCellDef="let permit; let i=index;">
        <button mat-icon-button class="form-button-spacing float-right" color="primary" (click)="onPermitDelete(permitsForm)">
          <mat-icon aria-label="Delete">delete</mat-icon>
        </button>
      </mat-cell>
    </mat-action-row>

  </ng-container>

  <!-- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> -->
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

其次，我在我的组件中实现了功能：

addNewPermitToArray(form: NgForm) {
    this.permitArray.push(form.value);
    this.getPermitDataSource();
    form.reset();
}

getPermitDataSource() {
    this.displayedColumns = this.displayedColumns = ['permit', 'title', 'issue', 'expiry', 'actions'];
    return this.permitDataSource = new MatTableDataSource(this.permitArray);
}

我希望这对其他人有帮助！