Vscode-ng-language-service: formGroup not a known property of form

[fknop]

This code shows the error message: Can't bind formGroup since it isn't a known property of form.

<form [formGroup]="form"></form>

The module from @angular/forms is imported via a custom SharedModule that is imported in the module of the template.

[chuckjaz]

Can you provide a repository that reproduces this?

[fknop]

I'm not able to reproduce it in a new project, I'll come back to you if I succeed to reproduce it.

[tamasfoldi]

I was able to reproduce it, but not in a repo. If I write the <form [formGroup]="form"></form> in my template, then add the FormGroup to the ts, then import FormGroup from @angular/forms, then add ReactiveFormsModule to my @NgModule it says Can't bind... but after a while if I edit the files and save them it disappears.

[chuckjaz]

Does reloading the window cause it to disappear as well?

Structural changes to modules take a lot of time (sometimes upwards of 3-4 seconds) to analyze so I defer the analysis until a quite period. Forcing the window to reload terminates the server and the new server will recalculate the references.

Changes that Tobias is making to support "watch mode" will help a lot in reducing this time but, until these changes land, reloading the window or waiting for the structural changes to propagate, is the best work around.

[ozknemoy]

have same problem. but not in vscode-ng-language-service repo. it is angular2-webpack-starter repo. but in another angular 2 repo all works fine

[tamasfoldi]

@chuckjaz Yes if I force to reload the window it solves the problem.

[petebacondarwin]

It looks like this issue is resolved in so far as it is working "as expected" and we need to wait for AOT watch mode to be implemented.

[prasannawagh]

@fknop Have you checked if you have imported ReactiveFormsModule under NgModule in app.modules.ts file. Only importing @angular/forms is not enough to make the reactive forms work. MAke sure you have this in your apps.module.ts -

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
imports: [FormsModule, ReactiveFormsModule]
})

[victorienfotsing]

One solution ist :
to use in HTML template I use #formName intead of [FormGroup]="formName"

<form id="userForm" #userForm>
      <input type="text" formControlName="given_name" ... >
      <input type="text" formControlName="family_name" ... >
      <input type="email" formControlName="email" ... >
</form>

app.module.ts

 import { FormsModule, ReactiveFormsModule } from '@angular/forms';`

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

And the component code look like

import { Component, OnInit, Input } from '@angular/core';
import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms';

@Component({
    ...
})
export class ProfileComponent implements OnInit {
  // tslint:disable-next-line:no-input-rename
  @Input('formGroup') userForm: FormGroup = new FormGroup({
    given_name: new FormControl(''),
    family_name: new FormControl(''),
    email: new FormControl('', [
      Validators.required,
      Validators.email,
    ])
  });
  ...
}

[kyliau]

Original issue is three years old and is already fixed.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}