ngModel cannot be used to register form controls with a parent formGroup directive

After upgrading to RC5 we began getting this error:

ngModel cannot be used to register form controls with a parent formGroup
directive.
Try using formGroup's partner directive "formControlName" instead.  Example:


<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>


In your class:


this.myGroup = new FormGroup({
firstName: new FormControl()
});


Or, if you'd like to avoid registering this form control,
indicate that it's standalone in ngModelOptions:


Example:


      

<div [formGroup]="myGroup">
<input formControlName="firstName">
<input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
</div>

It looks like in RC5 the two can no longer be used together, but I could not find an alternative solution.

Here is the component producing the exception:

    <select class="field form-control" [formGroup]="form" [(ngModel)]="cause.id" [name]="name">
<option *ngFor="let c of causes" [value]="c.text">{{c.text}}</option>
</select>
164001 次浏览
小开

好了，终于让它工作了: 看看 https://github.com/angular/angular/pull/10314#issuecomment-242218563

In brief, you can no longer use name attribute within a formGroup, and must use formControlName instead

小开

答案就在错误消息中, 您需要指出它是独立的，因此它不会与表单控件冲突:

[ngModelOptions]="{standalone: true}"
小开

当你写 表单控件名称角2不接受。你必须写 FormControlName。它是关于大写的第二个单词。

<input type="number" [(ngModel)]="myObject.name" formcontrolname="nameFormControl"/>

if the error still conitnue try to set form control for all of object(myObject) field.

在启动 <form> </form>之间，例如: <form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

小开 

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




this.userInfoForm = new FormGroup({
userInfoUserName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
userInfoName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
userInfoSurName: new FormControl({ value: '' }, Validators.compose([Validators.required]))
});
<form [formGroup]="userInfoForm" class="form-horizontal">
<div class="form-group">
<label class="control-label"><i>*</i> User Name</label>
<input type="text" formControlName="userInfoUserName" class="form-control" [(ngModel)]="userInfo.userName">
</div>
<div class="form-group">
<label class="control-label"><i>*</i> Name</label>
<input type="text" formControlName="userInfoName" class="form-control" [(ngModel)]="userInfo.name">
</div>
<div class="form-group">
<label class="control-label"><i>*</i> Surname</label>
<input type="text" formControlName="userInfoSurName" class="form-control" [(ngModel)]="userInfo.surName">
</div>
</form>

小开

扩展@Avenir Çokaj 的回答

Being a novice even I did not understand the error message clearly at first.

What the error message indicates is that in your formGroup you have an element that doesn't get accounted for in your formControl. (Intentionally/Accidentally)

如果您不打算验证这个字段，但是仍然希望在这个输入元素上使用 ngModel，请添加标志来表明它是一个独立的组件，不需要验证，如上面@Avenir 所提到的。

小开

如果组件有多个窗体，则注册所有控件和窗体

我需要知道为什么这种情况发生在某个部分而不是其他部分。

问题是我在一个组件中有两个表单，而第二个表单还没有 [formGroup]，因为我还在构建表单，所以还没有注册。

我继续完成了两个表格的写作，没有留下一个未注册的输入来解决这个问题。

小开

如果要在 formControlName中使用 [formGroup]，则必须将 name属性替换为 formControlNameformControlName。

例如:

This does not work because it uses the [formGroup] and name attribute.

<div [formGroup]="myGroup">
<input name="firstName" [(ngModel)]="firstName">
</div>

您应该将 name属性替换为 formControlName，它会像下面这样工作得很好:

<div [formGroup]="myGroup">
<input formControlName="firstName" [(ngModel)]="firstName">
</div>
小开

我只是得到了这个错误，因为我没有把所有的表单控件都包含在带有 formGroup属性的 div中。

例如，这将抛出一个错误

<div [formGroup]='formGroup'>
</div>
<input formControlName='userName' />

如果它是一个特别长的形式，那么它很容易被忽略。

小开

看起来您正在与 formControlName 相同的表单字段上使用 ngModel。支持使用 ngModel 输入属性和 ngModelChange 事件以及反应形式指令在 Angular v6中已被弃用，将在 Angular v7中删除

小开

当您的表单组标记中有一些没有 formControlName 属性的表单控件(如 Inputts、 Selects 等)时，将出现此错误。

这些例子引出了一个错误:

<form [formGroup]="myform">
<input type="text">
<input type="text" [ngmodel]="nameProperty">
<input type="text" [formGroup]="myform" [name]="name">
</fom>

有两种方式，独立的:

<form [formGroup]="myform">
<input type="text" [ngModelOptions]="{standalone: true}">
<input type="text" [ngmodel]="nameProperty" [ngModelOptions]="{standalone: true}">
<!-- input type="text" [formGroup]="myform" [name]="name" --> <!-- no works with standalone --
</form>

或者将其包含到表单组中

<form [formGroup]="myform">
<input type="text" formControlName="field1">
<input type="text" formControlName="nameProperty">
<input type="text" formControlName="name">
</fom>

最后一个意味着在初始化格式 Group 中定义它们

this.myForm =  new FormGroup({
field1: new FormControl(''),
nameProperty: new FormControl(''),
name: new FormControl('')
});

提交答案