Angular2 : ne Peut pas se lier à 'formGroup', car il n'est pas connu de la propriété de la "forme"
Je suis nouveau dans angulaire 2 et j'essaie de faire une forme réactive, mais j'ai des soucis. Après beaucoup de recherche dans la pile je n'ai pas trouvé de solutions.
Ici vous pouvez voir mon erreur
Le code :
Vue :
<main>
<div class="container">
<h2>User data</h2>
<form [formGroup]="userForm">
<div class="form-group">
<label>name</label>
<input type="text" class="form-control" formControlName="name">
</div>
<div class="form-group">
<label>email</label>
<input type="text" class="form-control" formControlName="email">
</div>
<div class="" formGroupName="adresse">
<div class="form-group">
<label>Rue</label>
<input type="text" class="form-control" formControlName="rue">
</div>
<div class="form-group">
<label>Ville</label>
<input type="text" class="form-control" formControlName="ville">
</div>
<div class="form-group">
<label>Cp</label>
<input type="text" class="form-control" formControlName="cp">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</main>
Mon module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ContactComponent } from './contact.component';
import { FormGroup , FormControl , ReactiveFormsModule , FormsModule } from '@angular/forms';
@NgModule({
imports: [
NgModule,
BrowserModule,
FormsModule,
ReactiveFormsModule,
FormGroup,
FormControl
],
declarations: [
ContactComponent
]
})
export class ContactModule {}
Et mon composant.ts
import {Component} from '@angular/core';
import { FormGroup , FormControl } from '@angular/forms';
@Component({
selector: 'contact',
templateUrl: './contact.component.html'
//styleUrls: ['../../app.component.css']
})
export class ContactComponent {
userForm = new FormGroup({
name: new FormControl(),
email: new FormControl(),
adresse: new FormGroup({
rue: new FormControl(),
ville: new FormControl(),
cp: new FormControl(),
})
});
}
Je ne comprends pas mon erreur, car l'importation de ReactiveForm est ici. Alors ... j'ai besoin de votre aide 🙂 Merci
Après j'ai lu votre réponse et de refactoring mon code, c'est ok, ça marche! Le problème était que je l'importation réactif module dans le module de ma page de contact et j'ai besoin de l'importer dans le module de mon application. Donc, merci beaucoup pour votre intérêt 🙂
Espère que cette réponse d'aider d'autres personnes, les gars.
- Supprimer
FormGroup
etFormControl
fom vos importations dans votre ngModule... - Vous avez beaucoup d'autres erreurs que vous devez l'enlever aussi.
- Pourquoi
NgModule
,FormGroup
etFormControl
dansimports
tableau de votre module ? - votre code semble bien fonctionner, voir est-il des différences à partir de ce plunker. plnkr.co/modifier/mSLpeHxUzjT6bxcEO3zi?p=preview
- Je pense qu'il est ignorant totalement le fait que son code ne compile pas, de sorte que le navigateur recharge de toute façon, mais c'est toujours l'erreur qu'il a essayé de réparer avec ces étranges importations.
- veuillez vérifier les erreurs de compilation et de les poster.
- Pas plus de commentaire... Il est probablement mort....
- Désolé, j'étais loin d'essayer par moi-même. C'est ok, il travail. Après la lecture de votre réponse. - Je importer reactiveform dans le module de ma page et non pas dans l'application.le module. Je suis nouveau avec le code et angulaire, et ce n'est pas vraiment facile de comprendre comment est le travail. Merci beaucoup pour votre temps
Vous devez vous connecter pour publier un commentaire.
Je pense que c'est une vieille erreur que vous avez essayé de résoudre par l'importation de petites choses au hasard dans votre module, et maintenant, le code ne compile pas plus. alors que vous ne payez pas attention à la coquille de sortie, le navigateur à recharger, et vous obtenez toujours la même erreur.
Votre module doit être :
ReactiveFormsModule
dans leimports
. Merci.essayer avec
<form formGroup="userForm">
au lieu de
<form [formGroup]="userForm">
Essayez d'ajouter ReactiveFormsModule dans votre composante.
Ne pas utiliser
userForm = new FormGroup()
Utilisation
form = new FormGroup()
à la place.Et dans l'utilisation de la forme
<form [formGroup]="form"> ...</form>
. Il fonctionne pour moi angulaire 6J'ai résolu par l'importation de FormModule dans une commune.module et de l'importation de la commune.module dans tous les autres modules. Mon cas est le FormModule est utilisé dans plusieurs modules.
J'ai eu le même problème et j'ai résolu le problème d'une autre manière, sans importer ReactiveFormsModule.
Vous avez peut-être mais ce bloc dans