Saya baru di angular 2 dan saya mencoba membuat formulir reaktif tetapi saya mengalami beberapa masalah. Setelah banyak mencari di stack saya tidak menemukan solusi.
Di sini Anda dapat melihat kesalahan saya
Kode:
Lihat:
<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>
Modul saya.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 {}
Dan komponen saya.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(),
})
});
}
Saya tidak mengerti kesalahan saya karena impor ReactiveForm ada di sini. Jadi ... saya butuh bantuan Anda :) Terima kasih
Setelah saya membaca jawaban Anda dan refactoring kode saya, tidak apa-apa, itu berhasil! Masalahnya adalah saya mengimpor modul reaktif di modul halaman kontak saya dan saya perlu mengimpor ini di modul aplikasi saya. Jadi terima kasih banyak atas minat Anda :)
Semoga jawaban ini membantu orang lain.
Saya pikir ini adalah kesalahan lama yang Anda coba perbaiki dengan mengimpor hal-hal acak dalam modul Anda dan sekarang kode tidak terkompilasi lagi. sementara Anda tidak memperhatikan output shell, browser memuat ulang, dan Anda masih mendapatkan kesalahan yang sama.
Modul Anda seharusnya:
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
ContactComponent
]
})
export class ContactModule {}
Cobalah untuk menambahkan ReactiveFormsModule di komponen Anda juga.
import { FormGroup, FormArray, FormBuilder,
Validators,ReactiveFormsModule } from '@angular/forms';
Jangan gunakan userForm = new FormGroup()
Gunakan form = new FormGroup()
sebagai gantinya.
Dan dalam form gunakan <form [formGroup]="form"> ...</form>
. Ini bekerja untuk saya dengan angular 6