关于FormControlName与FormGroup的使用

在 Angular 中，FormControlName 是用于表单绑定的指令之一。在使用 FormControlName 之前，我们需要使用 FormGroup 创建一个表单组。理解和正确使用这两个指令对于开发 Angular 应用程序至关重要。

什么是 FormGroup？

FormGroup 是一个通用类型，用于表示表单组。它会汇集表单中的所有输入控件，并将其组织为一个单个对象，以方便处理表单数据。

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

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="firstName">
      <input formControlName="lastName">
      <button type="submit">Submit</button>
    </form>
  `,
})
export class MyFormComponent {
  public myForm: FormGroup;
  
  constructor(private fb: FormBuilder) {
    this.myForm = fb.group({
      firstName: '',
      lastName: '',
    });
  }
}

如上代码所示，我们首先在组件中导入了 FormGroup 和 FormBuilder。接下来，我们创建一个 myForm 变量并初始化为一个 FormGroup 变量。在构造函数中，使用 FormBuilder 构造器创建了一个 form group，并在其中定义了 firstName 和 lastName 的空字符串。

FormControlName 与 FormGroup 必须结合使用来实现表单的正确绑定。

什么是 FormControlName？

FormControlName 用于将组件中的变量与表单中的控件进行关联。可以使用它轻松地将各种控件与表单组件的相应属性建立起绑定关系。其中，formControlName 指令属性必须与 FormGroup 中定义的控件名称一致。

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

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="firstName">
      <input formControlName="lastName">
      <button type="submit">Submit</button>
    </form>
  `,
})
export class MyFormComponent {
  public myForm: FormGroup;
  
  constructor(private fb: FormBuilder) {
    this.myForm = fb.group({
      firstName: '',
      lastName: '',
    });
  }
}

在上述代码中，我们在 template 中将两个 input 控件与 myForm 表单组进行绑定，input 控件中的 formControlName 必须与 FormGroup 中定义的控件名称一致。例如，如果您在 FormGroup 中定义了一个叫做“person”的表单控件，则您在 input 控件中的 formControlName 属性应该定义为“person”。这可以确保 Angular 知道正确地将输入绑定到组件中定义的属性上。

注意，FormControlName 必须与父 FormGroup 指令一起使用，以确保表单绑定可以正常工作。

以上是FormControlName及FormGroup的使用介绍。了解它们的作用，可以帮助您轻松地为 Angular 应用程序创建动态、易于维护的表单。