带有输入字段和复选框的 Angular mat-table

Question

我从后端获取一些数据并将其显示在我的用户界面中。问题是我希望能够修改每一行的输入字段和复选框，然后提交整个表单并处理信息。

我可以渲染页面，没问题，但我不知道从哪里开始创建 FormArray 以及如何将它们放置在我的 HTML 中以便能够单击保存按钮并提交整个表单。

这是我的打字脚本代码

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { AttributeSetRootObject } from '../../models/attribute-set.model';
import { AttributeSetService } from '../../services/attribute-set.service';

@Component({
  selector: 'app-attribute-set-standard',
  templateUrl: './attribute-set-standard.component.html',
  styleUrls: ['./attribute-set-standard.component.scss'],
})
export class AttributeSetStandardComponent implements OnInit {
  attributeSets: AttributeSetRootObject;
  attributeSetForm: FormGroup;

  displayedColumns = [
    'attributeName',
    'englishLabel',
    'frenchLabel',
    'dataType',
    'fieldType',
    'defaultValue',
    'mandatoryIndicator',
  ];

  constructor(
    private route: ActivatedRoute,
    private attributeSetService: AttributeSetService,
    private fb: FormBuilder
  ) {}

  ngOnInit(): void {
    const attributeSetId = parseInt(this.route.snapshot.paramMap.get('id'));
    console.log(attributeSetId);

    this.attributeSetForm = this.fb.group({
      defaultValue: [],
      mandatory: [],
    });

    this.attributeSetService.getStandardAttributes(attributeSetId).subscribe({
      next: (data: AttributeSetRootObject) => {
        console.log(data);
        this.attributeSets = data;
      },
    });
  }

  onSubmit() {
    console.log(this.attributeSetForm.value);
  }
}

HTML 代码

<app-breadcrumb [crumbs]="attributeSets?.data.parentlinks"></app-breadcrumb>

<div class="container py-3 my-3 bg-light">
  <h3>{{ "ATTRIBUTE-SET.STANDARD-ATTRIBUTES-TITLE" | translate }}</h3>
  <div class="table-container" *ngIf="attributeSets?.data?.attributes?.length">
    <form [formGroup]="attributeSetForm" (ngSubmit)="onSubmit()">
      <table
        mat-table
        #attributeSetSort="matSort"
        [dataSource]="attributeSets.data.attributes"
        matSort
        matSortDisableClear
      >
        <ng-container matColumnDef="attributeName">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>
            Attribute Name
          </th>
          <td mat-cell *matCellDef="let element">
            {{ element.attributeName }}
          </td>
        </ng-container>

        <ng-container matColumnDef="englishLabel">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>
            English Label
          </th>
          <td mat-cell *matCellDef="let element">
            {{ element.englishLabel }}
          </td>
        </ng-container>

        <ng-container matColumnDef="frenchLabel">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>
            French Label
          </th>
          <td mat-cell *matCellDef="let element">
            {{ element.frenchLabel }}
          </td>
        </ng-container>

        <ng-container matColumnDef="dataType">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Data Type</th>
          <td mat-cell *matCellDef="let element">
            {{ element.dataType }}
          </td>
        </ng-container>

        <ng-container matColumnDef="fieldType">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Field Type</th>
          <td mat-cell *matCellDef="let element">
            {{ element.fieldType }}
          </td>
        </ng-container>

        <ng-container matColumnDef="defaultValue">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>
            Default Value
          </th>
          <td mat-cell *matCellDef="let element">
            <mat-form-field>
              <mat-label class="asterix"
                >{{ "ATTRIBUTE-SET.DEFAULT-VALUE" | translate }}
              </mat-label>
              <input
                type="text"
                matInput
                formControlName="defaultValue"
                [value]="element.defaultValue"
              />
            </mat-form-field>
          </td>
        </ng-container>

        <ng-container matColumnDef="mandatoryIndicator">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Mandatory</th>
          <td mat-cell *matCellDef="let element">
            <mat-checkbox
              formControlName="mandatory"
              [checked]="element.mandatoryIndicator === 'Y'"
            ></mat-checkbox>
          </td>
        </ng-container>

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

      <button mat-raised-button color="primary">
        {{ "BUTTONS.SAVE" | translate }}
      </button>
    </form>
  </div>
</div>

用户界面

现在，当我单击“保存”时，它仅提交一个值。我希望能够提交表单的所有值。

Answer 1

当我们使用 FormArray 时，如果不以“经典方式”使用，我们可以简单地使用

<input [formControl]="...">

要获取 formControl，我们可以使用一个函数。例如你可以使用

  formArray:FormArray;
  getControl(index: number, controlName: string): FormControl {
    return (this.formArray.at(index) as FormGroup)
                .get(controlName) as FormControl;
  }

现在你可以像这样定义你的“细胞”了

    <ng-container matColumnDef="defaultValue">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>
        Default Value
      </th>
      <td mat-cell *matCellDef="let element;let i = index">
          <input
            type="text"
            matInput
            [formControl]="getControl(i,'defaultValue')"
          />
      </td>
    </ng-container>

    <ng-container matColumnDef="mandatoryIndicator">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Mandatory</th>
      <td mat-cell *matCellDef="let element;let i=index">
        <mat-checkbox
          [formControl]="getControl(i,'mandatory')"
        ></mat-checkbox>
      </td>
    </ng-container>

请注意支票中没有使用价值。您应该创建映射 dataSource.data 的 formArray

formArray = new FormArray(
    this.attributeSets.data.attributes.map(
      (x:any) =>
        new FormGroup({
          defaultValue: new FormControl(x.defaultValue),
          mandatory: new FormControl(x.mandatory == 'yes' ? true : false),
        })
    )
  );

a stackblitz

Answer 2

您可以检查 https://material.angular.io/components/table/overview 关联。他们有带有代码的样本表格。也尝试阅读 Angular Material Documentation。