formControlName和FormControl有什么区别？

Question

我正在使用ReactiveFormsModuleAngular2来创建包含表单的组件.这是我的代码:

foo.component.ts:

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

foo.component.html(with [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(with 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 为表单模块分配一个字符串,以按名称查找控件.

如果你为控件创建变量,你也不需要.哈利提到的,但我也建议使用,[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

接受的答案中有两个对应的第三项，是这样的（不推荐）：

<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 ，因此，如果出现错误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包含一组控件一样，profileFormFormGroup通过指令绑定到表单元素FormGroup ，从而在模型和包含输入的表单之间创建通信层。该指令formControlName提供的输入 FormControlName将每个单独的输入绑定到在FormGroup