DE SITUATIE:
Gelieve te helpen! Ik probeer een heel simpel formulier te maken in mijn Angular2 app maar wat er ook gebeurt het werkt nooit.
ANGULAR VERSIE:
Angular 2.0.0 Rc5
DE FOUT:
Can't bind to 'formGroup' since it isn't a known property of 'form'
![vul hier de beschrijving van de afbeelding in]]1
DE CODE:
Het uitzicht:
<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>
De controller:
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)
}
}
De 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 { }
DE VRAAG:
Waarom krijg ik die foutmelding?
Zie ik iets over het hoofd?
RC5 FIX
Je moet import { REACTIVE_FORM_DIRECTIVES } van '@angular/forms'
in je controller en voeg het toe aan directives
in @Component
. Dat zal het probleem oplossen.
Nadat je dat hebt opgelost, krijg je waarschijnlijk weer een foutmelding omdat je formControlName="name"
niet hebt toegevoegd aan je input in form.
RC6/RC7/Final release FIX
Om deze fout op te lossen, hoef je alleen ReactiveFormsModule
van @angular/forms
in je module te importeren. Hier's het voorbeeld van een basis module met 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 { }
Om verder uit te leggen, formGroup
is een selector voor een richtlijn genaamd FormGroupDirective
dat een onderdeel is van ReactiveFormsModule
, vandaar de noodzaak om het te importeren. Het wordt gebruikt om een bestaande FormGroup
aan een DOM element te binden. Je kunt er meer over lezen op Angular's officiële docs pagina.
Angular 4 in combinatie met feature modules (als je bijvoorbeeld een shared-module gebruikt) vereist dat je ook de ReactiveFormsModule
exporteert om te kunnen werken.
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 { }
Het voorgestelde antwoord werkte niet voor mij met Angular 4. In plaats daarvan moest ik een andere manier van attribute binding gebruiken met het attr
voorvoegsel:
<element [attr.attribute-to-bind]="someValue">