ngModel нельзя использовать для регистрации элементов управления формы с помощью родительской директивы formGroup

После обновления до 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>

Ответ находится прямо в сообщении об ошибке, вам нужно указать, что оно автономное и поэтому не конфликтует с элементами управления формы:

[ngModelOptions]="{standalone: true}"

Расширение ответа @Avenir Çokaj

Даже будучи новичком, я сначала не понял сообщения об ошибке.

Сообщение об ошибке указывает на то, что в вашей formGroup есть элемент, который не учитывается в вашем formControl. (Умышленно / случайно)

Если вы намереваетесь не проверять это поле, но все же хотите использовать ngModel в этом элементе ввода, добавьте флаг, чтобы указать, что это автономный компонент без необходимости проверки, как указано в @Avenir выше.

Хорошо, наконец-то он заработал: см. Https://github.com/angular/angular/pull/10314#issuecomment-242218563

Короче говоря, вы больше не можете использовать nameатрибут внутри a formGroup, и formControlNameвместо этого вы должны использовать

когда вы пишете 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>.

Если компонент имеет более одной формы, зарегистрируйте все элементы управления и формы

Мне нужно было знать, почему это происходит в определенном компоненте, а не в каком-либо другом.

Проблема заключалась в том, что у меня было 2 формы в одном компоненте, а вторая форма еще не была [formGroup]и еще не была зарегистрирована, так как я все еще создавал формы.

Я продолжил и завершил написание обеих форм, не оставив незарегистрированных входных данных, которые решают проблему.

Я получил эту ошибку только потому, что не заключил все элементы управления формой в атрибут divс formGroupатрибутом.

Например, это вызовет ошибку

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

Его довольно легко пропустить, если это особенно длинная форма.

Если вы хотите использовать [formGroup]с formControlName, вы должны заменить nameатрибут на formControlNameformControlName.

Пример:

Это не работает , потому что он использует [formGroup]и nameатрибут.

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

Вы должны заменить nameатрибут на, formControlNameи он будет работать следующим образом:

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

Похоже, вы используете ngModel в том же поле формы, что и formControlName. Поддержка использования свойства input ngModel и события ngModelChange с директивами реактивной формы устарела в Angular v6 и будет удалена в Angular v7.

Эта ошибка возникает, когда у вас есть некоторые элементы управления формой (например, Inputs, Selects и т. Д.) В тегах группы форм без свойства 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>

Последний подразумевает их определение в форме инициализации Group

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