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: ['']
});
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>