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

Question

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>

125

angular angular2-forms angular2-formbuilder

Источник

user2363245 24 авг '16 в 14:50

12 ответов

Другие вопросы по тегам angular angular2-forms angular2-formbuilder

user583065 14 ноя '16 в 12:36 2016-11-14 12:36 · Answer 1 · 2016-11-14 12:36

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

[ngModelOptions]="{standalone: true}"

259

Источник

user583065 14 ноя '16 в 12:36

user1221731 03 авг '17 в 18:31 2017-08-03 18:31 · Answer 2 · 2017-08-03 18:31

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

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

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

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

user2363245 25 авг '16 в 09:48 2016-08-25 09:48 · Answer 3 · 2016-08-25 09:48

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

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

20

Источник

user2363245 25 авг '16 в 09:48

user4454753 06 ноя '20 в 08:08 2020-11-06 08:08 · Answer 4 · 2020-11-06 08:08

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

user671674 13 янв '17 в 12:42 2017-01-13 12:42 · Answer 5 · 2017-01-13 12:42

При написании формы controlname 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>.

user5588816 03 фев '17 в 08:34 2017-02-03 08:34 · Answer 6 · 2017-02-03 08:34

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>

user9496229 07 фев '19 в 12:43 2019-02-07 12:43 · Answer 7 · 2019-02-07 12:43

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

Пример:

Это не работает, потому что, это использовать [formGroup]а также name attribut

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

ты должен заменить name приписывать formControlNameformControlName и это будет нормально работать следующим образом:

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

user1087131 15 мар '19 в 16:57 2019-03-15 16:57 · Answer 8 · 2019-03-15 16:57

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

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

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

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

1

Источник

user1087131 15 мар '19 в 16:57

user3284463 29 апр '18 в 07:20 2018-04-29 07:20 · Answer 9 · 2018-04-29 07:20

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

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

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

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

user5329382 03 дек '23 в 06:07 2023-12-03 06:07 · Answer 10 · 2023-12-03 06:07

если вам действительно нужен ngModal внутри реактивной формы[ngModelOptions]="{ standalone: true }"решу это

0

Источник

user5329382 03 дек '23 в 06:07

user12373149 22 июн '20 в 14:45 2020-06-22 14:45 · Answer 11 · 2020-06-22 14:45

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

0

Источник

user12373149 22 июн '20 в 14:45

Preet Bista 13 июн '23 в 05:30 2023-06-13 05:30 · Answer 12 · 2023-06-13 05:30

В моем случае я не импортировал NgForOF и MatOptionModule, поэтому их импорт решил мою проблему, введите описание изображения здесь.

0

Источник

Preet Bista 13 июн '23 в 05:30