ngModel不能用于使用父formGroup指令注册表单控件

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 属性的表单控件（如输入、选择等）时，会出现此错误。

这些示例会引发错误：

<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('')
});

Answer 5

当你写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 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>