formControlName 和 FormControl 有什么区别？

Question

我正在使用 Angular2 的ReactiveFormsModule 创建一个包含表单的组件。这是我的代码：

foo.component.ts：

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'fullname': ['', Validators.required],
        'gender': []
    });
}

foo.component.html（带有[formControl]）：

<div class="fields">
    <div class="field">
        <label>Fullname*</label>
        <input type="text" [formControl]="myForm.controls.fullname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Female</label>
        </div>
    </div>
</div>

foo.component.html（带有formControlName）：

<div class="fields">
    <div class="field">
        <label>Fullname*</label>
        <input type="text" formControlName="fullname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" formControlName="gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" formControlName="gender">
            <label>Female</label>
        </div>
    </div>
</div>

两种方式都有效。但我不知道使用[formControl] 和formControlName 有什么区别。

Answer 1

我相信您错过了重要的一点：第二个示例中的[formGroup] 指令。 formControlName 与 [formGroup] 一起使用来保存您的表单多点导航。例如：

<div>
  <input type="text" [formControl]="myForm.controls.firstName"/>
  <input type="text" [formControl]="myForm.controls.lastName"/>
  <input type="text" [formControl]="myForm.controls.email"/>
  <input type="text" [formControl]="myForm.controls.title"/>
</div>

相当于：

<div [formGroup]="myForm">
  <input type="text" formControlName="firstName"/>
  <input type="text" formControlName="lastName"/>
  <input type="text" formControlName="email"/>
  <input type="text" formControlName="title"/>
</div>

现在想象嵌套FormGroups :)

Answer 2

[formControl] 将对您创建的FormControl 实例的引用分配给FormControlDirective。

formControlName 为表单模块分配一个字符串以按名称查找控件。

如果您为控件创建变量，您也不需要 Harry 提到的 .，但我也建议改用 [formGroup]，因为对于更复杂的表单，这可能会变得混乱。

constructor(fb: FormBuilder) {
    this.fullName = new FormControl('', Validators.required);
    this.gender = new FormControl('');
    this.myForm = fb.group({
        'fullname': this.fullName,
        'gender': this.gender
    });
}

Answer 3

接受的答案中提供的两者有第 3 个等效项，即（不推荐）：

<div [formGroup]="myForm">
  <input type="text" [formControl]="firstName"/>
  <input type="text" [formControl]="lastName"/>
  <input type="text" [formControl]="email"/>
  <input type="text" [formControl]="title"/>
</div>

请注意，我们仍在使用 [formGroup] 指令。

但是，为了使该模板编译时不会出错，您的组件需要将控件声明为 AbstractControls 而不是 FormControls：

myComponent.ts

firstName: AbstractControl
lastName: AbstractControl
email: AbstractControl
title: AbstractControl

但是，请注意声明 AbstractControls 是 not recommended，因此如果您收到错误 Cannot find control with unspecified name attribute，则可能是您混合了样式或将您的控件声明为 AbstractControls。

Answer 4

来自 Angular 文档 (https://angular.io/guide/reactive-forms)：

组件

@Component({
  ...
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

---

模板

<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

请注意，正如 FormGroup 包含一组控件一样， profileForm FormGroup 绑定到带有FormGroup 的表单元素 指令，在模型和模型之间创建一个通信层 包含输入的表单。 formControlName 输入由 FormControlName 指令将每个单独的输入绑定到表单 FormGroup中定义的控件

Answer 5

使用[formControl]，您可以使用反应式编程优势，因为FormControl 有一个名为valueChanges 的属性（我现在知道这个，也许还有更多）它返回一个Observable，您可以订阅它并用它。 （例如，在注册场景中非常有用，您希望在用户更改值后检查输入电子邮件不重复）