I am trying to make what should be a very simple form in my Angular application, but no matter what, it never works.
Angular 2.0.0 RC5
Can't bind to 'formGroup' since it isn't a known property of 'form'
<form [formGroup]="newTaskForm" (submit)="createNewTask()">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" required>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';
@Component({
selector: 'task-add',
templateUrl: 'app/task-add.component.html'
})
export class TaskAddComponent {
newTaskForm: FormGroup;
constructor(fb: FormBuilder)
{
this.newTaskForm = fb.group({
name: ["", Validators.required]
});
}
createNewTask()
{
console.log(this.newTaskForm.value)
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { TaskService } from './task.service'
@NgModule({
imports: [
BrowserModule,
routing,
FormsModule
],
declarations: [ AppComponent ],
providers: [
TaskService
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Why am I getting that error? Am I missing something?
RC6/RC7/Final release FIX
To fix this error, you just need to import ReactiveFormsModule
from @angular/forms
in your module. Here's the example of a basic module with ReactiveFormsModule
import:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
To explain further, formGroup
is a selector for directive named FormGroupDirective
that is a part of ReactiveFormsModule
, hence the need to import it. It is used to bind an existing FormGroup
to a DOM element. You can read more about it on Angular's official docs page.
RC5 FIX
You need to import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'
in your controller and add it to directives
in @Component
. That will fix the problem.
After you fix that, you will probably get another error because you didn't add formControlName="name"
to your input in form.