在Angular中如何监听某个值的变化

目录 Angular监听某个值的变化 使用getter angular使用form表单监听数据 引入主要使用方法类 FormGroup，FormBuilder，Validators 赋值引入 创建表单+监听数据 总结

Angular监听某个值的变化

使用getter

在? Angular ?中可以用? getter ?来监听某个值的变化，类似于? Vue ?中的? watch

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app测试数据ponent.html',
  styleUrls: ['./app测试数据ponent.css']
})
export class AppComponent {

  _inputVal;

  set inputVal(val) {
    this._inputVal = val;
    this.inputChange();
  };

  get inputVal() {
    return this._inputVal;
  }

  inputChange(val) {
    console.log(val);
  }
}

angular使用form表单监听数据

主要使用方法类 FormGroup，FormBuilder，Validators

引入主要使用方法类 FormGroup，FormBuilder，Validators

import {
?Validators,
?FormGroup,
?FormBuilder
} from '@angular/forms';

赋值引入

?? ?validateForm: FormGroup;
?? ?constructor(private fb: FormBuilder,private ref: ChangeDetectorRef,private private) {}

创建表单+监听数据

? data = {
? ?? ?name: [null, [Validators.required]], //Validators.required 表示验证（必填）
? };
? ngOnInit(): void {
?? ?this.validateForm = this.fb.group(this.data);
?? ?// 监听整个表单的变化
? ? this.validateForm.valueChanges.subscribe(data => console.log('form', data));
?? ?// 单个control 变化
? ? this.validateForm.get('name').valueChanges.subscribe(data => console.log('solo', data));
? }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

原文地址：https://blog.csdn.net/qq_37012965/article/details/116993216

查看更多关于在Angular中如何监听某个值的变化的详细内容...