NgModel не может использоваться для регистрации элементов управления формы с родительской формой.

После обновления до RC5 мы начали получать эту ошибку:

ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
  formGroup 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 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>

ОТВЕТЫ

Ответ 1

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

[ngModelOptions]="{standalone: true}"

Ответ 2

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

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

Что указывает сообщение об ошибке, так это то, что в вашей группе форм у вас есть элемент, который не учитывается в вашем formControl. (Преднамеренно/Нечаянно)

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

Ответ 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>.

Ответ 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>

Ответ 6

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

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

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

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

Ответ 7

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

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

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

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

Ответ 8

Если вы хотите использовать [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>