formGroup ожидает экземпляр FormGroup

У меня есть пример базовой формы Angular 2 RC4 на Plunkr, который, похоже, выдает следующую ошибку (в консоли Chrome DEV)

Вот плункр

https://plnkr.co/edit/GtPDxw?p=preview

Ошибка:

browser_adapter.ts:82 EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./App class App - inline template:1:7
ORIGINAL EXCEPTION: formGroup expects a FormGroup instance. Please pass one in.
           Example: <form [formGroup]="myFormGroup">

ORIGINAL STACKTRACE:
Error: formGroup expects a FormGroup instance. Please pass one in.
           Example: <form [formGroup]="myFormGroup">

    at new BaseException (https://npmcdn.com/@angular/[email protected]/src/facade/exceptions.js:27:23)
    at FormGroupDirective._checkFormPresent (https://npmcdn.com/@angular/[email protected]/src/directives/reactive_directives/form_group_directive.js:110:19)
    at FormGroupDirective.ngOnChanges (https://npmcdn.com/@angular/[email protected]/src/directives/reactive_directives/form_group_directive.js:39:14)
    at DebugAppView._View_App0.detectChangesInter

angular angular2-forms angular2-formbuilder
person user6123723    schedule 18.07.2016    source источник

Ответы (6)


arrow_upward
82
arrow_downward

В вашем коде есть несколько проблем

  • <div [formGroup]="form"> вне тега <form>
  • <form [formGroup]="form">, но имя свойства, содержащего FormGroup, - loginForm, поэтому должно быть <form [formGroup]="loginForm">
  • [formControlName]="dob", который передает значение свойства dob, которое не существует. Вам нужно передать строку dob, например [formControlName]="'dob'" или проще formControlName="dob"

Пример Plunker

person Günter Zöchbauer    schedule 19.07.2016
comment
Также это может произойти, если вы не создали форму в файле .ts. - person Charitha Goonewardena; 15.08.2018
comment
или если вы создаете динамически - person Humble Dolt; 10.07.2019
comment
Или имя чувствительно к регистру в HTML или в ts - person afsarkhan10182; 19.09.2019
comment
Это может произойти, если ngOnInit () имеет 'await', поэтому в этом случае вам нужно определить группу форм в конструкторе. - person Ibra; 01.04.2021

arrow_upward
33
arrow_downward

Я столкнулся с этой проблемой и исправил, поставив отметку в атрибуте формы. Эта проблема может возникнуть, если FormGroup не инициализирована.

<form [formGroup]="loginForm" *ngIf="loginForm">
OR
<form [formGroup]="loginForm" *ngIf="this.loginForm">

Форма не будет отображаться до тех пор, пока она не будет инициализирована.

person Shakoor Hussain Attari    schedule 28.05.2020
comment
Просто удалите это, если кто-то его копирует. Мне пришлось использовать метод ngOnInit (), чтобы избежать этого - person amrography; 11.07.2020
comment
@amrography Я не мог тебя понять. не могли бы вы объяснить немного больше. Спасибо - person Shakoor Hussain Attari; 15.07.2020
comment
просто отредактируйте эту часть *ngIf="this.loginForm" на *ngIf="loginForm" - person amrography; 16.07.2020
comment
Это спасло мне жизнь !! Спасибо чувак:) - person StarLord; 15.01.2021

arrow_upward
9
arrow_downward

Я использовал реактивные формы и столкнулся с аналогичными проблемами. Мне помогло то, что я установил соответствующий FormGroup в классе. Что-то вроде этого:

myFormGroup: FormGroup = this.builder.group({
    dob: ['', Validators.required]
});
person Patrick    schedule 16.08.2018

arrow_upward
3
arrow_downward

У меня была такая же ошибка, и я решил ее после переноса инициализации formBuilder из ngOnInit в конструктор.

person johannesMatevosyan    schedule 15.12.2020

arrow_upward
3
arrow_downward

У меня была такая же ошибка, и я решил удалить из нее шаблон async await:
исходный код

async ngOnInit()
{
  this.id = await this.route.snapshot.paramMap.get('id');

рабочий код

ngOnInit()
{
  this.id = this.route.snapshot.paramMap.get('id');

Я думаю, это может быть связано с ответом @johannesMatevosyan чуть выше. Я действительно не знаю почему, но работает на меня.

person Martin    schedule 30.03.2021

arrow_upward
2
arrow_downward

У меня была эта ошибка, когда я указал fromGroupName вместо formArrayName.

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

<div formGroupName="formInfo"/>

<div formArrayName="formInfo"/>

person Tom Benyon    schedule 23.04.2019