2

I have an Angular form like below and it has a save button that is disabled until a input field is changed (made dirty) and it works fine with input elements. Then I placed a Angular Material UI table inside the form and I want the form to be dirty if I make a change to the table ex. select a row, edit a row value, add a row, delete a row, etc.

Is there a way to make the form dirty, to enable the save button, either manually setting it in the ts file or some other way so that my save button will be enabled?

I tried putting a form-control class in the table class, but I don't think it worked and it messed up all my css, because I'm using an Angular Material table with lots of pre defined CSS.

Here is my code that show my basic form with a mat table in it

// 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>
chuckd
  • 13,460
  • 29
  • 152
  • 331

2 Answers2

0

I think one solution, maybe not the best, is to add a second check in the disabled attribute Like

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

and then when I modify something in a table (ex. add a row, select a row checkbox, etc) I can set this bool to true. And then after I save, set it to false!

Any thoughts? Is there a better way?

chuckd
  • 13,460
  • 29
  • 152
  • 331
0

I think you can use (ngModelChange) event in input tag eg. 

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);
    }

}

May this help. Thank You

Dipak Nirmal
  • 1