SYTUACJA:
Proszę o pomoc! Próbuję zrobić to, co powinno być bardzo prostym formularzem w mojej aplikacji Angular2, ale bez względu na to, co to nigdy nie działa.
WERSJA KĄTOWA:
Angular 2.0.0 Rc5
THE ERROR:
Can't bind to 'formGroup' since it isn't a known property of 'form'
THE CODE:
Widok:
<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>
Kontroler:
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)
}
}
Moduł ngModule:
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 { }
PYTANIE:
Dlaczego dostaję ten błąd?
Czy czegoś mi brakuje?
RC5 FIX
Musisz importować { REACTIVE_FORM_DIRECTIVES } z '@angular/forms'
w swoim kontrolerze i dodać go do directives
w @Component
. To rozwiąże problem.
Po naprawieniu tego, prawdopodobnie otrzymasz kolejny błąd, ponieważ nie dodałeś formControlName="name"
do swojego wejścia w formularzu.
RC6/RC7/Final release FIX
Aby naprawić ten błąd, musisz po prostu zaimportować ReactiveFormsModule
z @angular/forms
w swoim module. Oto'przykład podstawowego modułu z importem ReactiveFormsModule
:
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 { }
Aby wyjaśnić dalej, formGroup
jest selektorem dla dyrektywy o nazwie FormGroupDirective
, która jest częścią ReactiveFormsModule
, stąd potrzeba jej importu. Jest on używany do powiązania istniejącej FormGroup
z elementem DOM. Więcej na ten temat można przeczytać na Angular's official docs page.
Angular 4 w połączeniu z feature modules (jeśli np. używasz shared-module) wymaga również wyeksportowania ReactiveFormsModule
do pracy.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule
],
declarations: [],
exports: [
CommonModule,
FormsModule,
ReactiveFormsModule
]
})
export class SharedModule { }
Sugerowana odpowiedź nie zadziałała dla mnie z Angular 4. Zamiast tego musiałem użyć innego sposobu wiązania atrybutów z przedrostkiem attr
:
<element [attr.attribute-to-bind]="someValue">