NgForm.valueChanges is not being triggered when form input values are being changed programatically

Question

In below code snippet, when I change the value of the variable (selectedBot) which is bound to form input (name="bot_id") programmatically ((click)="botSelected(bot) on <li>), form.valueChanges subscription callback handler is not triggered. However if I type in the input, this callback is being triggered as expected.

I have two question:

Why is it happening?
How to make it work?

app.component.html

<p>Selected bot: {{selectedBot.name}}</p>

<form #form="ngForm">

  <div class="btn-group" style="width: 100%">
    <div style="width: 100%">
      <input type="text" id="add" name="bot_id" ngModel placeholder="select a bot" [value]="selectedBot && selectedBot.name || ''">
      <i class="fa fa-angle-down center-vertical-absolute"></i>

    </div>
    <ul  class="dropdown-menu" role="menu" style="width: 100%; max-height: 30vh; overflow-y: scroll">
      <li role="menuitem" *ngFor="let bot of botList" (click)="botSelected(bot)"><a
        class="dropdown-item" [ngClass]="{'dropdown-item-active': selectedBot && selectedBot._id===bot._id}">{{bot.name}}</a>
      </li>
    </ul>
  </div>


</form>

app.component.ts

export class AppComponent implements OnInit {

  title = 'app';
  selectedBot;
  botList = [
    {'_id': 1, name: 'good bot'},
    {'_id': 2, name: 'bad bot'}
  ];
  @ViewChild('form') form: NgForm;


  constructor(private http: Http) {
  }
  ngOnInit() {
    this.form.valueChanges.subscribe((value) => {
      console.log('form data changed', value);
      /*NOT BEING TRIGGEERED WHEN ANY <li> IN <ul> is being clicked*/
    });
  }

  botSelected(bot) {
    this.selectedBot = bot;
  }

}

score 3 · Accepted Answer · 2018-07-26 11:37:12Z

3

Trigger the detection yourself.

botSelected(bot) {
  this.selectedBot = bot;
  this.form.updateValueAndValidity();
}

I would also recommend you use the correct function to set the values of the form. This means using [(ngModel)] and FormControl.prototype.setValue

EDIT Following this stackblitz, you should simply bind your inputs to a variable with [(ngModel)], and it should work.

edited Jul 26, 2018 at 11:37

answered Jul 26, 2018 at 11:26

user4676340

Sign up to request clarification or add additional context in comments.

10 Comments

user4676340 Over a year ago

Then use updateModel, and start binding your model to your form, as my edit suggests.

AVJT82 Over a year ago

Where did my previous comment go? :D

user4676340 Over a year ago

Mines are going away too !

Sandeep Gupta Over a year ago

mine too.. scary

user4676340 Over a year ago

And why doesn't it fits youe use case ? That's the exact same thing as using value : your list of bots will be in the input. If you wish to lock it so the user can't edit it, then don't create an input or set it to disabled.

|

Collectives™ on Stack Overflow

NgForm.valueChanges is not being triggered when form input values are being changed programatically

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related