formControlName和FormControl有什么区别?


97

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

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


1
我想说,在formControl上使用formControlName的主要原因是当您不想在组件中维护单个FormControl实例时。
Paul Samsotha '16

Answers:


177

我相信您错过了重要的一点:[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:)


使用[formControl] =“ form.get('Registration.Attributes.aboutme')”会导致问题..但可以与formControlName =“ firstNRegistration.Attributes.aboutmeame一起使用”
Ricardo Saracino

[formControl]form.valid用formGroup验证时引起问题,任何评论
Pardeep Jain

如果输入特长是另一个组件,我该如何处理。我如何将fomrcontrol与该组件绑定
Ramakanth Reddy,

20

[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
    });
}

当我添加this.fullName = new FormControl('',Validators.required); 我收到错误消息,因为它是只读属性或常量,所以无法分配,但是在这里我被视为一个变量。所以请帮助
user8478

1
请发布确切的错误消息。它甚至可能更好地创建一个包含代码的新问题,使重现
君特Zöchbauer

7

接受的答案中有两个对应的第三项,是这样的(不推荐):

<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。


如果输入特长是另一个组件,我该如何处理。我如何将fomrcontrol与该组件绑定
Ramakanth Reddy,

您不能-即使有办法,您也不应该。元素应绑定到在该组件中定义的控件。如果要将数据传递给另一个组件,请使用服务(或者如果它是父组件,则使用事件发射器)。Google如何在组件之间传递数据
rmcsharry19年

你可以请你看看这个帖子 stackoverflow.com/questions/58100248/...
Ramakanth雷迪

2

从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 伪指令绑定到form元素,从而在模型和包含输入的表单之间创建一个通信层。指令formControlName提供的输入 FormControlName将每个单独的输入绑定到在FormGroup


1

[formControl]您一起可以使用Reactive编程的优势,因为它FormControl具有一个名为valueChanges(现在我知道这个,也许不止这个)的属性,该属性返回一个Observable可以订阅和使用的属性。(例如,这在注册方案中非常有用,您要在注册方案中检查用户更改值后是否立即不重复输入电子邮件)


是。但是,即使在答案中使用模型,您仍然在模板中使用formControlName。只需将formControlName =“ someFormControlName”分配给component.ts文件中的FormControl,例如someFormControlName:FormControl;
查尔斯·罗伯逊
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.