NgForm.valueChanges 以编程方式更改表单输入值时未触发

Question

在下面的代码片段中，当我以编程方式更改绑定到 input (name="bot_id") 的变量 (selectedBot) 的值时（(click)="botSelected(bot) <li>), form.valueChanges 订阅回调处理程序未被触发。但是，如果我输入内容，就会按预期触发此回调。

我有两个问题：

为什么会这样？
如何让它发挥作用？

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;
  }

}

Answer 1

自行触发检测。

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

我还建议您使用正确的函数来设置表单的值。这意味着使用 [(ngModel)] 和 FormControl.prototype.setValue

EDIT 在 this stackblitz 之后，您应该简单地将您的输入绑定到带有 [(ngModel)] 的变量，它应该可以工作。

NgForm.valueChanges 以编程方式更改表单输入值时未触发

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

angular

angular-forms