web-dev-qa-db-fra.com

Angular 6: Impossible de se lier à 'formGroup' puisqu'il ne s'agit pas d'une propriété connue de 'form'

J'ai travaillé avec formateur de forme dans angulaire 2/4, mais maintenant je l'utilise dans angulaire 6. J'ai vu cette question ( Ne peut pas lier à 'formGroup' car il n'est pas une propriété connue de 'forme' ) mais c'était pour angular 2 . Je fais exactement la même chose contre angular 4 mais j'obtiens cette erreur. S'il vous plaît aider: Mon code sont:

app.module.ts: (j'ai exporté FormsModule & ReactiveFormsModule):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocalStorage } from './services/localStorage.service';
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { Router } from '@angular/router';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.route';

import { FormsModule, ReactiveFormsModule }         from '@angular/forms';
import { LoginComponent } from './components/login/component';
import { ForgotComponent } from './components/forgotPassword/component';


@NgModule({
  exports: [
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    AppComponent,LoginComponent,ForgotComponent
  ],
  imports: [
    BrowserModule,
    routing,

  ],
  providers: [
    LocalStorage,
  ],
  bootstrap: [AppComponent],

})
export class AppModule { }

login.component.ts:

import { Component, ViewContainerRef, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
import { LocalStorage } from '../../services/localStorage.service';
import { environment } from '../../../environments/environment';
import { HttpService } from '../../services/http.service';
import { emailRegexp, passwordRegexp } from '../../constants';
@Component({
    selector: 'login-app',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})

/**
 * LoginComponent class
 */

export class LoginComponent {
    private loginForm: any;
    loginValue:any;

    constructor(
        private formBuilder: FormBuilder,
        private _router: Router,
        private httpService: HttpService,
        private localStorage: LocalStorage,
    ) {
        this.loginValue = new LocalStorage(environment.localStorageKeys.ADMIN).value;

        this.loginForm = this.formBuilder.group({
            email: ['', Validators.compose([Validators.required, Validators.pattern(emailRegexp)])],
            password: ['', Validators.compose([Validators.required, Validators.minLength(8)])]
        });
    }
}

login.component.html: (quelque chose comme ça)

 <form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && login()" novalidate>

 <input type="email" autocomplete="off" (focus)="focusFunction()" placeholder="User Name" formControlName="email" class="form-control">

<div class="col-12">
 <input autocomplete="off" type="password" (focus)="focusFunction()" placeholder="Password" formControlName="password" class="form-control">
 </div>

 <button [disabled]="!loginForm.valid" type="submit" class="btn btn-inverse btn-rounded btn-block">
            <div  *ngIf="!loading" class="sign-in">Sign in</div>
  </button>

  </form>

 Console Image

javascriptangular5angular6angular-formsangular-formbuilder
4
Shubham Verma

Ajoutez le code ci-dessous dans votre app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

et dans le tableau imports:

imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ]
13
Prashant Pimpale
import these things in your appmodule.ts

imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
0
James Siva

Mettez à jour app.module.ts comme suit dans belows diff  enter image description here

0
joey

Donc, nous nous occupons du même problème frustrant - une installation propre d'angular-cli et un sous-composant/module personnalisé (composant.html ...) et la même erreur ("Impossible de se lier à 'formGroup' car ce n'est pas un propriété connue de 'forme' "). Angular CLI: 7.2.3, Node: 10.9.0, OS: win32 x64, Angular: 7.2.2

Je ai finalement réussi à le faire fonctionner basé sur ce qui précède, mais avec une torsion J'ai mis les importations FormsModule & ReactiveFormsModule dans app-routing.module.ts (pas app.module.ts) + le ts du sous-composant (dans mon cas: forms-demo.component.ts): 

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
....
@NgModule({
  imports: [
    RouterModule.forRoot(routes), 
    FormsModule, ReactiveFormsModule
....

Par la suite, ng build/serve a fonctionné sans erreur. 

Je ne suis pas un expert angulaire, mais j’imagine que c’est l’approche v7 selon laquelle app.module.ts délègue au routage des applications, ce dernier fichier contenant les importations et les dépendances des composants et de l’application .... YMMV, mais j'espère que cela aide . 

0
MetaSimian