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

89

После обновления до 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>
user2363245
источник
Вы импортировали FormsModuleи ReactiveFormsModule?
Günter Zöchbauer
Конечно, они оба
user2363245
AFAIK, единственное существующее объяснение следующее: blog.angular-university.io/…
user2363245
Найден источник изменения: github.com/angular/angular/pull/10314
user2363245

Ответы:

171

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

[ngModelOptions]="{standalone: true}"
Авенир Чокай
источник
1
что значит автономный?
Jas
2
Это означает, что он не обрабатывается моделью / данными формы, поэтому вы можете передавать данные любым объектом / моделью, какой хотите, как это было в AngularJS 1
Avenir Çokaj
Я вижу эту проблему только в своей тестовой установке. Чего именно не хватает? [ngModelOptions] = "{standalone: ​​true}" исправляет тест, но меняет логику. ngModel унаследован от родительского компонента, который в моем случае объявляет ngForm
aholbreich
2
Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. https://next.angular.io/api/forms/FormControlName#use-with-ngmodel
WasiF
27

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

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

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

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

Саникс
источник
6
Что, если вы хотите использовать if для проверки и одновременно использовать его с ngModel?
Пол
В моем случае я пропустил объявление formControl для элемента внутри formGroup!
Сагар Хатри
8

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

Barış çıracı
источник
1

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

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

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

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

Цели и азартные игры
источник
1

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

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

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

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

Стивен Пол
источник
1

Если вы хотите использовать [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>
САНА Абдул Азиз
источник
решение для этого также может быть, если вы используете [formGroup] = "myGroup" и внутреннюю ссылку с помощью [(ngModel)] свойства, которое является nog в formGroup. попробуйте добавить [ngModelOptions] = "{standalone: ​​true}", чтобы сообщить своему компилятору, что оно может быть исключено и что это отдельное свойство
ProblemAnswerQue
0

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

Кодир Амиров
источник
0

Эта ошибка возникает, когда у вас есть некоторые элементы управления формой (например, 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('')
});
Мецтли
источник