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

Question 1

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

Question 2

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

[ngModelOptions]="{standalone: true}"

Question 3

扩展@AvenirÇokaj的答案

即使是新手，起初我也不太清楚错误消息。

错误消息指示的是，在您的formGroup中，有一个您的formControl中没有考虑的元素。（有意/无意）

如果您打算不验证此字段，但仍想在此输入元素上使用ngModel，请添加标志以表明它是独立组件，而无需进行@Avenir上面提到的验证。

Question 4

好的，终于可以使用了：请参阅https://github.com/angular/angular/pull/10314#issuecomment-242218563

简单地说，你可以不再使用name中的属性formGroup，并且必须使用formControlName替代

Question 5

当您编写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>.

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

展开摘要

Question 7

如果组件具有多个表格，请注册所有控件和表格

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

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

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

Question 8

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

例如，这将引发错误

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

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

Question 9

如果您想使用[formGroup]与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>

Question 10

好像您在与formControlName相同的表单字段上使用ngModel。在Angular v6中已弃用对ngModel输入属性和ngModelChange事件以及反应形式指令的支持，在Angular v7中将不再支持

Question 11

当您的表单组标签中有一些没有formControlName属性的表单控件（例如Inputs，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>

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

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