角形变化检测

Question

I am using Angular forms, and I would like to use their built-in change detection to implement a functionality in my application. When a user clicks a button, he should only see a dialog if he/she has made any changes in the form.

I have changesMade variable:

private changesMade: boolean;

This is my TS code of the form:

this.carForm = new FormGroup({
        name: new FormControl('', [
            Validators.required,
            Validators.pattern('[a-zA-Z ]*'),
            Validators.minLength(1),
            Validators.maxLength(10)
        ])});

This is my HTML code of the form:

<form [formGroup]="carForm">
        <ion-item>
          <ion-label  stacked>car name</ion-label>
          <ion-input type="text" [(ngModel)]="carname" formControlName="name"></ion-input>
        </ion-item>
</form>

Here is my simulated(for now) service call where I subscribe to form changes after I've set the value of carname, which is bound to the input

setTimeout(()=>{
  this.carname = "BMW";
  this.carForm.valueChanges.subscribe(val => {
  this.changesMade = true;
    });
}, 44)

The problem here is that even though I haven't touched the form, this.changesMade gets set to true.

NOTE: If I move the subscribe part of the code in the ngAfterViewInit, it still sets the changesMade to true even though I haven't toushed the input:

  ngOnInit(){
    //simulated server call
    setTimeout(()=>{
      this.carname = "BMW";

    }, 44)
  }
      ngAfterViewInit(){
this.carForm.valueChanges.subscribe(val => {
      this.changesMade = true;
        });
    }

I have created a STACKBLITZ demonstrating the problem. How can I make it execute this.changesMade = true; only when I've actually physically touched the input in the UI?

Answer 1

You use two approach in one form:

• Reactive Forms
• Template Forms

You need to select one.

This solution with reactive forms:

1.Remove ngModel from template

<ion-input type="text" formControlName="name"></ion-input>

2.Add rxjs/first for update changesMade once and auto unsubscribe

import 'rxjs/add/operator/first';

3.Remove carName property from you component and update from with patchValue

ngOnInit() {
  //simulated server call
  setTimeout(() => {
    this.carForm.patchValue({ name: 'BMW' })
    this.carForm.valueChanges.first().subscribe(val => {
      this.changesMade = true;
    });
  }, 44)
}

Stackblitz example

Answer 2

The problem here is that you are mixing reactive forms and ngModel . Since you have used ngModel in your template and setting this.carName = 'BMW' in your component, this triggers the change detection and the formGroup gets updated and your changesMade flag becomes true. Remove the ngModel and get your form values using reactive form APIs: https://angular.io/guide/reactive-forms#reactive-forms-api .

I have updated the STACKBLITZ: https://stackblitz.com/edit/ionic-qkjeu6?file=pages%2Fhome%2Fhome.ts

Answer 3

So by putting the subscription at the end of the callstack (with setTimeout(0)) everything seems to be working as expected:

//simulated server call
setTimeout(()=>{
  this.carname = "BMW";
  setTimeout(function(){
  this.carForm.valueChanges.subscribe(val => {
  this.changesMade = true;
    });
  }.bind(this), 0)

}, 44)

Here is a STACKBLITZ demonstrating that it works.

UPDATE

Since using reactive forms with ngModel is deprecated in Angular 6+ , it's better to replace the reactive forms with template driven forms in similar use cases.