Angular2 : Tidak dapat mengikat 'formGroup' karena itu bukan properti yang diketahui dari 'form'

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.

Cyril
Pertanyaan edit 6 April 2017 в 9:26
Pemrograman
angular
6 April 2017 в 7:46
Belum ada tampilan
Larutan

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 {}
n00dl3
Jawaban edit 6 April 2017 в 8:34
Komentar (8)

Cobalah untuk menambahkan ReactiveFormsModule di komponen Anda juga.

import { FormGroup, FormArray, FormBuilder,
          Validators,ReactiveFormsModule  } from '@angular/forms';
sf_
Jawaban edit 7 Juli 2017 в 10:59
Komentar (0)

Jangan gunakan userForm = new FormGroup()

Gunakan form = new FormGroup() sebagai gantinya.

Dan dalam form gunakan .... Ini bekerja untuk saya dengan angular 6

Hategekimana Ernest
Jawaban edit 17 September 2018 в 6:47
Komentar (1)