从 fromgroup 访问 formcontrol - TypeScript

当使用 Angular 的表单时，我们通常会使用 FormGroup、FormControl 和 FormArray 这三个类。FormGroup 表示一个表单组， FormControl 表示表单组中的一个表单控件， FormArray 表示一个表单控件数组。

当我们需要获取 FormControl 的值时，我们通常会直接使用 formControl.value 来获取。

但有时我们需要在 FormGroup 中操作 FormControl，这时就需要使用 fromGroup.get() 方法来获取 FormControl 实例，然后再进行相关操作，比如获取表单的值、设置表单的值等。

我们来看一个例子：

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

@Component({
  selector: 'app-user-form',
  template: `
    <form [formGroup]="userForm">
      <input formControlName="name"/>
      <input formControlName="email"/>
    </form>
  `,
})
export class UserFormComponent {
  userForm = new FormGroup({
    name: new FormControl(),
    email: new FormControl(),
  });

  constructor() {}

  onSubmit() {
    console.log(this.userForm.get('name').value);
    console.log(this.userForm.get('email').value);
  }
}

在这个例子中，我们使用 FormGroup 和 FormControl 来构建一个用户表单。表单中有两个输入框，分别用来输入用户名和邮箱。

在组件的 onSubmit() 方法中，我们使用 this.userForm.get('name').value 和 this.userForm.get('email').value 来分别获取用户名和邮箱的值。

需要注意的是，从 FormGroup 中获取 FormControl 时，需要使用 FormControl 的 name 来获取，而不是 FormControl 对象本身。

以上就是从 FormGroup 访问 FormControl 的方法。希望可以帮助大家更好地使用 Angular 的表单。

参考文献

• Angular Forms - Working with Form Controls
• Angular FormGroup.get() Method