I'm neu in Angular 2 und ich versuche, eine reaktive Form zu machen, aber ich habe einige Probleme. Nach vielen Suche in Stapel fand ich keine Lösungen.
Hier können Sie meine Fehler sehen
Der Code:
Ansicht:
<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>
Mein Modul.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 {}
Und meine component.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(),
})
});
}
Ich verstehe meinen Fehler nicht, weil der Import von ReactiveForm hier ist. Also ... ich brauche eure Hilfe :) Danke
Nachdem ich Ihre Antwort gelesen habe und meinen Code überarbeitet habe, ist es ok, das funktioniert! Das Problem war, dass ich das ReactiveForm Modul in das Modul meiner Seite contact importiert habe und ich dieses in das Modul meiner App importieren muss. Also vielen Dank für Ihr Interesse :)
Hoffe diese Antwort hilft anderen Leuten.
Ich denke, dass dies ein alter Fehler ist, den Sie versucht haben, zu beheben, indem Sie zufällige Dinge in Ihr Modul importieren und jetzt der Code nicht mehr kompiliert.
Ihr Modul sollte sein:
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
ContactComponent
]
})
export class ContactModule {}
Versuchen Sie auch, das ReactiveFormsModule in Ihre Komponente aufzunehmen.
import { FormGroup, FormArray, FormBuilder,
Validators,ReactiveFormsModule } from '@angular/forms';
Verwenden Sie nicht userForm = new FormGroup()
.
Verwenden Sie stattdessen form = new FormGroup()
.
Und im Formular verwenden Sie <form [formGroup]="form"> ...</form>
. Das funktioniert bei mir mit Angular 6