107

升级到 RC5 后，我们开始收到此错误：

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>

看起来在 RC5 中两者不能再一起使用，但我找不到替代解决方案。

这是产生异常的组件：

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

10 回答 10

217

错误消息上的答案是正确的，您需要指出它是独立的，因此它不会与表单控件冲突：

[ngModelOptions]="{standalone: true}"
于 2016-11-14T12:36:54.117 回答
32

Expanding on @Avenir Çokaj's answer

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)

If you intend on not validating this field but still want to use the ngModel on this input element please add the flag to indicate it's a standalone component without a need for validation as mentioned by @Avenir above.

于 2017-08-03T18:31:51.583 回答
19

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

简而言之，您不能再name在 a 中使用属性formGroup，而必须formControlName使用

于 2016-08-25T09:48:31.753 回答
9

当你写formcontrolname Angular 2 时不接受。你必须写formControlName。它是关于大写的第二个单词。

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

如果错误仍然继续，请尝试为所有 object(myObject) 字段设置表单控件。

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

于 2017-01-13T12:42:48.913 回答
6 

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>

于 2017-02-03T08:34:13.767 回答
4

当您的表单组标签中有一些表单控件（如输入、选择等）但没有 formControlName 属性时，会出现此错误。

这些示例引发错误：

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

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

this.myForm =  new FormGroup({
    field1: new FormControl(''),
    nameProperty: new FormControl(''),
    name: new FormControl('')
});
于 2020-11-06T05:08:44.710 回答
1

如果组件有多个表单，注册所有控件和表单

我需要知道为什么会在某个组件中发生这种情况，而不是在任何其他组件中。

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

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

于 2018-04-29T07:20:00.090 回答
1

我刚刚收到此错误，因为我没有将所有表单控件包含在div带有formGroup属性的 a 中。

例如，这将引发错误

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

如果表格特别长，很容易错过。

于 2019-03-15T16:57:29.747 回答
0

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

例子：

这不起作用，因为它使用[formGroup]andname属性。

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

您应该替换name属性formControlName，它会像下面这样正常工作：

<div [formGroup]="myGroup">
   <input formControlName="firstName" [(ngModel)]="firstName">
</div>
于 2019-02-07T12:43:01.573 回答
0

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

于 2020-06-22T11:45:30.387 回答