SITUACIJA:
Prašome pagalbos! Bandau sukurti labai paprastą formą savo "Angular2" programoje, tačiau, kad ir kas darytų, ji niekada neveikia.
ANGULAR VERSIJA:
Angular 2.0.0 Rc5
KLAIDA:
Can't bind to 'formGroup' since it isn't a known property of 'form'
KODAS:
Vaizdas:
<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>
Valdiklis:
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)
}
}
NgModulis:
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 { }
KLAUSIMAS:
Kodėl aš gaunu šią klaidą?
Ar aš kažką praleidau?
RC5 PATAISYMAS
Jums reikia importuoti { REACTIVE_FORM_DIRECTIVES } iš '@angular/forms'
savo valdiklyje ir pridėti jį prie @Component
directives
. Tai išspręs problemą.
Ištaisę tai, tikriausiai gausite kitą klaidą, nes nepridėjote formControlName="name"
prie savo formos įvesties.
RC6/RC7/galutinės versijos PATAISYMAS
Kad ištaisytumėte šią klaidą, jums tereikia importuoti ReactiveFormsModule
iš @angular/forms
į savo modulį. Štai pagrindinio modulio su importuotu ReactiveFormsModule
pavyzdys:
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 { }
Toliau paaiškinsime, kad formGroup
yra direktyvos, pavadintos FormGroupDirective
, kuri yra ReactiveFormsModule
dalis, selektorius, todėl ją reikia importuoti. Ji naudojama esamai FormGroup
susieti su DOM elementu. Daugiau apie jį galite paskaityti Angular'oficialiame dokumentų puslapyje.
Kad "Angular 4" veiktų kartu su funkcijų moduliais (jei, pavyzdžiui, naudojate bendrąjį modulį), taip pat reikia eksportuoti ReactiveFormsModule
.
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 { }
Siūlomas atsakymas man neveikė su "Angular 4". Vietoj to turėjau naudoti kitą [atributų susiejimo] būdą (https://angular.io/guide/template-syntax#attribute-binding) su priešdėliu attr
:
<element [attr.attribute-to-bind]="someValue">