angular使用form表单监听数据

angular使用form表单监听数据

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

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

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

2 赋值引入

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

3 创建表单+监听数据

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