form表单相关使用以及下拉框

不想996了的小姑娘

于 2020-11-27 17:01:14 发布

阅读量1.8k

点赞数

分类专栏： angular 文章标签： angular typescript

本文链接：https://blog.youkuaiyun.com/qq_32332433/article/details/109526136

版权

3 篇文章

订阅专栏

本文介绍Angular中监听控件值变化的方法，包括使用ngModelChange事件、formcontrol的valueChanges订阅等，并提供具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：https://www.cnblogs.com/dennis0525/p/7631301.html

angular中一般控件会有change事件，但是如果某些控件没有这个事件我们如何监听值的变化呢？

对于双向绑定的值，当值改变后监听事件有如下写法：

1. 如果是ngModel可以用ngModelChange事件。
在这里插入图片描述

2.如果是formcontrol

在这里插入图片描述

2.1 订阅整个form表单可以如下：

ngOnInit(){
  this.form.valueChanges.subscribe((value) => {
     console.log(value); 
   })
}

2.2 订阅表单中单个控件可以如下：

ngOnInit(){
  this.form.get(''customer_id").valueChanges.subscribe((this.valueChanges);
valueChanges=($event)=>{
this.processData($event);
}

或者这样写

ngOnInit(){
  this.form.get(''customer_id").valueChanges.subscribe((value) => {
      this.processData(value); 
   })
}

3.对于下拉框，根据选中的value获取label

tabl(val) {
  let obj = {};
  obj = this.options.find(item => {
  	return item.id === val;
  });
   this.ruleForm.artistName = obj.name;
}