Angular : How to detect changes made to form automatically

[user12345]

Hi All

Is there any way to detect whether the user has made any change to the form using angular form .?

example :

Step 1 : Value for name (type = input) will be : "test".(By default, the ng-model will be defaulted as value will be retrieved from API Response).

Step 2 : User has changed value to "test1"

Step 3 : User has changed value to "test".

Is there any attribute inside that form where i can check that the user has not changed anything ideally for input directive. I think , dirty, pristine, touched elements inside the form will not be used for this scenario.

Step 4 : User has changed value to "hello". 

Step 5 : User has changes value to "test"'

So what i am looking is , is there any attribute where i can check whether the user has made any change to the input, like for

Step 2-->value should be true

Step 3-->value should be false

Step4-->value should be true.

Thanks !

[Zlatko Đurić]

Sure there is.

<input (change)="valueChanged($event)">

Your valueChanged will be called on each change.

P.S. For angular 1, the directive is ng-change.

[Sander Elias]

Hi User12345

When using a form you can refer to the form by its name inside your controller. here is a small example:

  <form name="demoForm">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email" ng-model='user.email'>
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password" ng-model='user.pass'>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model='user.keep'> Remember me
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </form>


  <pre>{{user|json}}</pre>
  <pre>{{demoForm |json}}</pre>

You can see it in action in this plunk.

Filling in the various parts of the form, you can examine the from's state directly in the view, this way you get a feeling of what is going on.

Regards

Sander