如何在 Angular 中获取表单的值？

在 Angular 中，获取表单的值是非常常见的需求。通常，我们会在组件类中使用表单控件的绑定，然后根据需要获取表单的值。

获取表单控件

要获取表单的值，首先需要获取表单控件。Angular 中可以使用 FormControl、FormGroup 和 FormArray 来创建表单控件，它们都继承自 AbstractControl。

我们可以使用 ViewChild 来获取表单控件，代码如下：

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
      <input type="text" name="username" ngModel>
      <input type="password" name="password" ngModel>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class FormComponent {
  @ViewChild('f', { static: false }) form: NgForm;

  onSubmit(form: NgForm) {
    console.log(form.value);
  }
}

在上面的代码中，我们使用了 ViewChild 来获取了表单控件，然后在 onSubmit 中使用 form.value 来获取表单的值。

获取表单值

要获取表单的值，我们可以使用表单控件的 value 属性。对于 FormGroup 和 FormArray 来说，它们的 value 属性是一个对象，包含了所有表单控件的值。对于 FormControl 来说，它的 value 是该控件的值。

让我们来看一个实例：

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

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="form">
      <input formControlName="username">
      <input formControlName="password">
    </form>
    <button (click)="onSubmit()">Submit</button>
  `,
})
export class FormComponent {
  form = new FormGroup({
    username: new FormControl(''),
    password: new FormControl(''),
  });

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

在上面的代码中，我们创建了一个 FormGroup，它包含了两个 FormControl：username 和 password。当用户提交表单时，我们通过 this.form.value 来获取表单的值。

通过订阅值变化来获取表单值

在某些情况下，我们需要在表单值发生变化时立即做出响应。Angular 中可以使用 valueChanges 来监听表单的值变化，代码如下：

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

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="form">
      <input formControlName="username">
      <input formControlName="password">
    </form>
  `,
})
export class FormComponent {
  form = new FormGroup({
    username: new FormControl(''),
    password: new FormControl(''),
  });

  constructor() {
    this.form.valueChanges.subscribe(value => {
      console.log(value);
    });
  }
}

在上面的代码中，我们使用 valueChanges 来订阅表单值的变化，在表单值发生变化时会输出变化后的表单值。

总结

以上就是在 Angular 中获取表单的值的方法。我们可以通过 ViewChild、Form Group 和 valueChanges 这些方式来获取表单的值。在使用时，需要根据实际情况选择不同的方式来获取表单的值。