Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.5k views
in Technique[技术] by (71.8m points)

angular - Angular2 : Can't bind to 'formGroup' since it isn't a known property of 'form'

I'm new in angular 2 and i try to make a reactive form but i have some trouble. After many search in stack i found no solutions.

Here you can see my error

enter image description here

The code :

View :

    <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>

My 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 {}



And my 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(),
            })
        });
    }

I don't understand my error because import of ReactiveForm is here. So ... i need your help :) Thanks

After I read your answer and refactoring my code, it's ok, that works! The problem was i import reactive module in the module of my page contact and i need import this in module of my app. So thanks a lot for your interest :)

Hope this answer help another people guys.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I think that this is an old error that you tried to fix by importing random things in your module and now the code does not compile anymore. while you don't pay attention to the shell output, the browser reload, and you still get the same error.

Your module should be :

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    ContactComponent
  ]
})
export class ContactModule {}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...