FormGroup 和 [FormGroup] 带括号的区别答案

【问题标题】：Different between FormGroup and [FormGroup] with bracketsFormGroup 和 [FormGroup] 带括号的区别
【发布时间】：2019-07-24 18:58:25
【问题描述】：

我正在以角度构建动态形式，但我仍在努力理解使用之间的区别 FormGroup 和 [FormGroup]（带括号）和 FormControlName 与 [FormControlName]

【问题讨论】：

一些代码作为上下文可能会有所帮助。

标签： angular forms dynamic

【解决方案1】：

这是 Angular 在模板中绑定属性的基本概念（检查documentation）。使用括号您可以绑定在组件中声明的变量。没有括号，您将绑定变量的值。

formControlName 与 [formControlName] 之间的区别是第一个，formControlName 在组件中的 FormGroup 中声明，第二个是在组件中声明为独立的 FormControl。

例子：

@Component({
  selector: 'app-profile-editor',
  template: `
    <form [formGroup]="profileForm">
    <label>
        First Name:
        <input type="text" formControlName="firstName">
    </label>
    </form>
 `
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl('')
  });
}

@Component({
  selector: 'app-profile-editor',
  template: `
    <form>
        <label>
            First Name:
            <input type="text" [formControlName]="firstName">
        </label>
    </form>
 `
})
export class ProfileEditorComponent {
  firstName = new FormControl('');
}

检查 Angular documentation about reactive forms。

【讨论】：