修改表单内的 Angular Material 表后如何使我的 ngForm 变脏答案

【问题标题】：How to make my ngForm dirty after modifying an Angular Material table inside the form修改表单内的 Angular Material 表后如何使我的 ngForm 变脏
【发布时间】：2020-04-06 10:43:21
【问题描述】：

我有一个像下面这样的 Angular 表单，它有一个保存按钮，该按钮在输入字段被更改（变脏）之前被禁用，并且它可以与输入元素一起正常工作。然后我在表单中放置了一个 Angular Material UI 表，如果我对表进行更改，我希望表单是脏的。选择一行、编辑一行值、添加一行、删除一行等

有没有办法让表单变脏，启用保存按钮，或者在 ts 文件中手动设置它，或者以其他方式启用我的保存按钮？

我尝试在表格类中放置一个表单控制类，但我认为它不起作用，而且它弄乱了我所有的 css，因为我使用的是带有大量预定义 CSS 的 Angular Material 表格。

这是我的代码，它显示了我的基本表单，其中包含一个垫子表

// just to show here how my ngForm is in the ts file
@ViewChild('editForm', {static: false}) editForm: NgForm;

<form #editForm="ngForm" id="editForm" (ngSubmit)="updateData()">
  <button class="btn btn-primary btn-sm" type="submit" [disabled]="!editForm.dirty">Save</button>

  <input type="text" class="form-control" placeholder="ex. Chuck" [(ngModel)]="matterData.firstName" name="firstName">

  <div class="form-row">
    <div class="form-group col-md-12">
      <table mat-table [dataSource]="generalSmokingSource" class="smoking-table" name=smokingTable>

        <ng-container matColumnDef="product">
          <th mat-header-cell *matHeaderCellDef> Product </th>
          <td mat-cell *matCellDef="let element"> {{element.product}} </td>
        </ng-container>

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

    </div>
  </div>

</form>

【问题讨论】：

标签： html angular form-control material-table angular-material-table

【解决方案1】：

我认为一种可能不是最好的解决方案是在禁用属性 Like 中添加第二个检查

[disabled]="!editForm.dirty || tableModified"

然后当我修改表格中的某些内容时（例如添加一行、选择一个行复选框等），我可以将此布尔值设置为 true。然后我保存后，设置为false！

有什么想法吗？有没有更好的办法？

【讨论】：

【解决方案2】：

我认为您可以在输入标记中使用 (ngModelChange) 事件，例如。

import {Component} from '@angular/core'
import {FormsModule} from '@angular/forms'

@Component({
    selector: 'template-driven-form',
    template: `
    <section>
      <h1>(ngModelChange) Example:</h1>
      <form #f="ngForm" (ngSubmit)="onSubmitTemplateBased()">
      <p>
        <label>Name:</label>
        <input type="text"  
          [ngModel]="username"
          (ngModelChange)="onChange($event)"
          name="username"
          required>
      </p>
      <p>
        <button type="submit" [disabled]="!f.valid">Submit</button>
      </p>
      </form>
    </section>
    `
})

export class TemplateDrivenForm {

    username: string = 'nome';

    onSubmitTemplateBased() {
      console.log(this.username);
    }

    onChange(event) {
      console.log(event);
    }

}

希望对您有所帮助。谢谢你

【讨论】：