I need to listen if there any changes in the form, make enable/disable SAVE button if there changes or not | Angular

Question

Have issue with listening any changes on a page there is some information, and even if no changes SAVE button active for click

ngOnInit(): void {
        this.createConfigForm()

        this.configFilterForm.valueChanges.pipe(takeUntil(this.unsubscribeAll$)).subscribe(value => {
            value
        })
 }

<!-- ADD BUTTON -->
            <button
                *ngIf="isUpdate()"
                [disabled]="configFilterForm"
                mat-raised-button
                class="add-config-button"
                (click)="onSave()"
                trackClickSnowplow
                id="config-form_save_button"
            >
                <span>SAVE</span>
            </button>

Please post complete question/code and possibly with a screenshot. Try Stackblitz to get you quick and right assistance. — Santhosh John, Jun 04 '21 at 13:18
I updated part of code, in fact now button disabled but it's doesn't change its state after changing value — Mike Yefymovych, Jun 04 '21 at 14:01
I request to post the entire code which will be helpful for the community to assist you better. Sometimes guesses may lead to wrong answers and time wastage. — Santhosh John, Jun 04 '21 at 14:10

Besartt · Answer 1 · 2022-09-25T12:37:50.980

Angular provide this functionality out of the box. All you need to add is form property is: pristine or dirty and will detect if you have changed something on the form:

[disabled]="configFilterForm.pristine"

<button
   *ngIf="isUpdate()"
   [disabled]="configFilterForm.pristine"
   mat-raised-button
   class="add-config-button"
   (click)="onSave()"
   trackClickSnowplow
   id="config-form_save_button"
   >
    <span>SAVE</span>
   </button>

score 1 · Answer 2 · answered Jun 04 '21 at 14:16

In your HTML file;

<form [formGroup]="formAngular" (ngSubmit)="onSubmit()">
        <label>Name</label>
        <input type="text" formControlName="name">

        {{formAngular.controls.name.errors | json}}

        <p 
            *ngIf="formAngular.controls.name.errors?.required && formAngular.controls.name.touched && formSend">
            It is required your name
        </p>

    <input type="submit" value="Send"  />

    <p  *ngIf="formSend && !formAngular.valid">Form is not complete</p>

</form>

In your component TS file;

  formAngular: FormGroup;

  formSend: boolean;

  constructor() {
    this.formSend = false;
    this.formAngular = new FormGroup({
      name: new FormControl('', [
        Validators.required,
        Validators.maxLength(10)
      ])
  }

onSubmit() {
    this.formSend = true;
    console.log("Form value: ", this.formAngular.value);
  }


ngOnInit() {
    const controlName = this.formAngular.controls.name;
    controlName.valueChanges.pipe(debounceTime(500)).subscribe(value => {
      console.log("Your changes: ", value);
    });
  }

score 1 · Accepted Answer · answered Jun 04 '21 at 17:23

Listen to the form changes like you are doing now, and every time there is a change, enable the button. Disable the button when you click the button, it will stay disabled until change happens. Something like:

configFilterForm: FormGroup;
isDisabled = true;

constructor(private fb: FormBuilder) {
  this.configFilterForm = this.fb.group({
    input1: ['hello']
  });

  this.configFilterForm.valueChanges.pipe(
    takeUntil(this.unsubscribeAll$)
  ).subscribe(value => {
     this.isDisabled = false;
  });
}

And button:

<button [disabled]="isDisabled">Submit</button>

HERE'S A DEMO

BTW, I see you are calling some function *ngIf="isUpdate()" on your button. Please don't do that, they are called on each change detection and can really slow down your application. Use variables instead!

Thank you a lot This realy works, I just added some of code to run it properly=) — Mike Yefymovych, Jun 07 '21 at 11:58

I need to listen if there any changes in the form, make enable/disable SAVE button if there changes or not | Angular

3 Answers3