Question

升级到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>

Answer 1

答案是正确的错误信息，你需要表明它是独立的，因此它不会与表单控件发生冲突：

[ngModelOptions]="{standalone: true}"

Answer 2

扩展@AvenirÇokaj的回答

作为一名新手，即使我一开始并没有清楚地理解错误信息。

错误消息表明在formGroup中有一个元素在formControl中没有被考虑。（有意/不留神）

如果您打算不验证此字段但仍希望在此输入元素上使用ngModel，请添加该标志以指示它是独立组件，而无需上述@Avenir所述的验证。

Answer 3

好的，最后让它运转起来：见https://github.com/angular/angular/pull/10314#issuecomment-242218563

简而言之，您无法再在name中使用formGroup属性，而必须使用formControlName

Answer 4

当你写 formcontrolname 时Angular 2不接受。你必须写 formControlName 。这是关于大写的第二句话。

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

如果错误仍然存在，请尝试为所有对象（myObject）字段设置表单控件。

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

Answer 5

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>

Answer 6

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

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

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

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

Answer 7

我刚收到此错误，是因为我没有将所有表单控件都包含在具有loop1: for I in 0 to n-1 generate loop2: for J in 0 to m-1 generate if Chip_Select = '1' and (I = to_integer(unsigned(address))) then CS(I)(J) <= '1'; else CS(I)(J) <= '0'; end if; SRAM_Cell_vhdl1 : SRAM_Cell_vhdl port map (Datain(J), CS(I)(J), Write_Enable and Chip_Select, intermediate_out(I, J)); end generate loop2; end generate loop1;属性的CS中。

例如，这将引发错误

std_ulogic

如果它的格式特别长，可能很容易错过。

Answer 8

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

示例：

这不起作用，因为它使用了[formGroup]and name`属性。

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

您应将name属性替换为formControlNameformControlName，这样可以正常工作，如下所示：

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

Answer 9

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

Answer 10

当您的表单组标签中有一些没有formControlName属性的表单控件（例如Inputs，Selects等）时，就会发生此错误。

这些示例引发错误：

pageProps

有两种方法，单独使用：

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

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

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

ngModel不能用于使用父formGroup指令

10 个答案: