Search code examples
angularangular-reactive-formsangular4-forms

Detect changes on all input fields in form


I am using Reactive forms.It has lot of fields(input,select, etc) with save and print button.Here i have a scenario which is whenever the user changes any of the fields value the print button should be disabled.Initially the print button is in enabled state.I dont know how to handle the whole form inputs.Can anyone help me to sort this.

<div class="tab-content">
 <form [formGroup]="EditForm">
  <div class="form-group">
     <label for="title" class="control-label">
       <span>TITLE</span>                      
     </label>
     <div>
       <input type="text" size="27" formControlName="Title" pInputText>
     </div>
  </div>    

   <div class="form-group">
     <label for="title" class="control-label">
       <span>Department</span>                      
     </label>
     <div>
       <input type="text" size="27" formControlName="Department" pInputText>
     </div>
  </div>
</form>    

The below is component.ts

 constructor(
    private route: ActivatedRoute,
    private formBuilder: FormBuilder,
   ){
    this.EditForm= this.formBuilder.group({
        Title: ['', Validators.required],
        Department: ['']
    });

Solution

  • We can use the below code:

    dirty:- true if some control was modified

        <button  type="submit" [disabled]="EditForm.dirty" (click)="exportPdf()">
            <span >PRINT PAGE</span>
        </button>