Angular监听某个值的变化
使用getter
在 Angular
中可以用 getter
来监听某个值的变化,类似于 Vue
中的 watch
- import { Component } from '@angular/core';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.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));
- ? }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持w3xue。