1. 在组件中定义表单

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-myForm',
  template: `
    

      
      
      Submit
    
  `
})

export class MyFormComponent {
  myForm = new FormGroup({
    username: new FormControl(''),
    email: new FormControl('')
  });

  onSubmit() {
    console.log(this.myForm.value);
  }
}

2. 订阅每个独立控件的值改变

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-myForm',
  template: `
    

      
      
      Submit
    
  `
})

export class MyFormComponent {
  myForm = new FormGroup({
    username: new FormControl(''),
    email: new FormControl('')
  });

  onUsernameChange() {
    console.log(this.myForm.controls.username.value);
  }

  onEmailChange() {
    console.log(this.myForm.controls.email.value);
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}