Html 如何在修改窗体内的角材质表后使窗体变脏

我有一个像下面这样的角度表单，它有一个保存按钮，该按钮在输入字段被更改（变脏）之前处于禁用状态，并且可以很好地处理输入元素。 然后，我在表单中放置了一个角度材质UI表，如果我对表进行更改，我希望表单变脏。例如，选择一行，编辑一行值，添加一行，删除一行，等等

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

我试着在table类中加入一个form控件类，但我认为它不起作用，它把我所有的css都搞乱了，因为我使用的是一个有很多预定义css的角度材质表

这是我的代码，它显示了我的基本表单，其中有一个mat表

//仅在此处显示我的ngForm在ts文件中的状态
@ViewChild（'editForm'，{static:false}）editForm:NgForm

拯救
产品
{{element.product}
我认为一个解决方案，也许不是最好的，就是在禁用属性中添加第二个检查，如

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

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

有什么想法吗？有更好的方法吗？
我认为您可以在输入标记中使用（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);
    }

}

从'@angular/core'导入{Component}
从“@angular/forms”导入{FormsModule}
@组成部分({
选择器：“模板驱动表单”，
模板：`
（ngModelChange）示例：

姓名：


提交

`
})
导出类TemplateDrivenForm{
用户名：string='nome'；
onSubmitTemplateBased（）{
console.log（this.username）；
}
onChange（事件）{
console.log（事件）；
}
}

希望这有帮助。多谢各位