在Angular中同时实时显示反应式表单元素

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

@Component({
  selector: 'app-reactive-form',
  template: `
    <form [formGroup]="form">
      <input formControlName="name" placeholder="Name">
      <p>实时显示的值: {{ form.get('name').value }}</p>
    </form>
  `
})
export class ReactiveFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ''
    });

    // 实时监听表单值的变化
    this.form.get('name').valueChanges.subscribe(value => {
      console.log('实时值:', value);
    });
  }
}

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

@Component({
  selector: 'app-reactive-form',
  template: `
    <form [formGroup]="form">
      <input formControlName="name" placeholder="Name">
      <p>实时显示的值: {{ form.get('name').value }}</p>
    </form>
  `
})
export class ReactiveFormComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ''
    });
  }

  ngOnInit() {
    // 实时监听表单值的变化
    this.form.get('name').valueChanges.subscribe(value => {
      console.log('实时值:', value);
    });
  }
}