angular - Angular2 の MatTable の行のセル間でデータを共有する

私は多くのマテリアルデザインのテーブルを使用して、Angularでアプリケーションを開発しています。

さて、これらのテーブルのいくつかではデータを編集することができますので、私にはいくつかの行があり、それぞれの行にはいくつかのフィールドを持つ一連の列があり、最後の列にはデータへの変更を適用するか最初の状態に戻すことができるボタンがあります。

機能はかなりうまく動作していて、データの編集も問題なく行えます。現在は、データにバリデーションを追加し、mat-hint と mat-error を使って入力欄の下にヒントやエラーを表示することでユーザー体験を向上させようと考えています。

問題は、行のフィールドのいずれかが無効な場合に「送信」ボタンを無効にできないことです。

アプリケーションの他の部分でテーブルがなかった場所では、私が行ったことは次の通りです:

<form #form="ngForm">
    <mat-form-field>
        <input name="data" #inputData="ngModel" [(ngModel)]="model" />
        <mat-error *ngIf="inputData.errors">
            some error
        </mat-error>
    </mat-form-field>
    <button [disabled]="form.invalid" type="submit">Submit</button>
</form>

でも今は持っています

<mat-table>
  <ng-container cdkColumnDef="id">
    <mat-header-cell *cdkHeaderCellDef> Id </mat-header-cell>
    <mat-cell *cdkCellDef="let row"> {{row.id}} </mat-cell>
  </ng-container>

  <ng-container cdkColumnDef="input">
    <mat-header-cell *cdkHeaderCellDef> Input </mat-header-cell>
    <mat-cell *cdkCellDef="let row">
      <input [(ngModel)]="row.data" name="data" #inputData="ngModel"/>
    </mat-cell>
  </ng-container>

  <ng-container cdkColumnDef="actions">
    <mat-header-cell *cdkHeaderCellDef>Actions</mat-header-cell>
    <mat-cell *cdkCellDef="let row;">
      <button (click)="submitData(row)">
        Submit
      </button>
    </mat-cell>
  </ng-container>

  <mat-header-row *cdkHeaderRowDef="['id', 'input', 'actions']"></mat-header-row>
  <mat-row *cdkRowDef="let row; columns: ['id', 'input', 'actions'];"></mat-row>
</mat-table>

同じ効果をどうやって得ることができますか？単にinputDataを使うだけではうまくいかないことはわかっています。なぜなら、それはテンプレート変数であり、行、ヘッダー、セルの定義がすべて異なるテンプレートにあるからです。行に何かを追加することは本当に避けたいです。なぜなら、それは私のモデル変数であり、物事を分けておきたいからです。

私はエラーを表示することができますが、私が達成したい主なことは、上記のように整理されたテーブル内でいくつかのフィールドが無効な場合に送信ボタンを無効にすることです。