błąd kątowy 2: nie można rozwiązać wszystkich parametrów dla FormGroup


Śledzę samouczek Thoughtram dla FormBuilder

http://blog.thoughtram.io/angu ... .html
http://blog.thoughtram.io/angu ... .html
Skopiowałem kod i zmieniłem kilka nazw zmiennych. Używam Angular 2.1.2, Typescript 2.0.8 i Angular Material2 (z Google). Atom Typescript mówi, że na żadnej stronie nie ma błędów. Jednak pojawiają się błędy podczas ładowania, a strona nie ładuje się z tym nowym kodem.
zone.js:388 Unhandled Promise rejection: Can't resolve all parameters for FormGroup: (?, ?, ?). ; Zone: <root> ; Task: Promise.then ; Value: Error: Can't resolve all parameters for FormGroup: (?, ?, ?).(…) Error: Can't resolve all parameters for FormGroup: (?, ?, ?).
at CompileMetadataResolver.getDependenciesMetadata ([url=http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14598:2]http://localhost:3000/node_mod ... 598:2[/url]1)
at CompileMetadataResolver.getTypeMetadata ([url=http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14499:2]http://localhost:3000/node_mod ... 499:2[/url]8)
at eval ([url=http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14642:4]http://localhost:3000/node_mod ... 642:4[/url]3)
at Array.forEach (native)
at CompileMetadataResolver.getProvidersMetadata ([url=http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14622:2]http://localhost:3000/node_mod ... 622:2[/url]1)
at CompileMetadataResolver.getDirectiveMetadata ([url=http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14262:3]http://localhost:3000/node_mod ... 262:3[/url]6)
at eval ([url=http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14367:5]http://localhost:3000/node_mod ... 367:5[/url]1)
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata ([url=http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14361:5]http://localhost:3000/node_mod ... 361:5[/url]1)
at RuntimeCompiler._compileComponents ([url=http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17063:4]http://localhost:3000/node_mod ... 063:4[/url]9)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
2016-11-10 16:01:40.394 zone.js:390 Error: Uncaught (in promise): Error: Can't resolve all parameters for FormGroup: (?, ?, ?).(…)consoleError @ zone.js:390_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339


Przykład HTML

dla apartment4Rent.component.html
<form [formGroup]="registerApartment4RentForm" (submit)="onSubmit($event)">
<md-input id="country" name="country" class="required" aria-labelledby="country" formControlName="country"
i18n-placeholder="select country placeholder" placeholder="Country" type="text" size="30" maxlength="30">
</md-input>

plus 4 identyczne dla stanu, miasta, ulicy i kodu pocztowego

AppComponent

konstruktorem z samouczka - w folderze aplikacji
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';@Component({
moduleId: module.id,
selector: 'residence-app',
templateUrl: "components/navigation/headerFooter.html",
styleUrls: [ "components/navigation/styleHeaderFooter.css" ],
providers: [
FormBuilder,
FormGroup
]
})
export class AppComponent implements OnInit {
registerApartment4RentForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.registerApartment4RentForm = this.formBuilder.group({
country: '',
stateProvince: '',
address: this.formBuilder.group({
streetAddress: '',
zipCode: '',
city: ''
})
});
}
}

headerFooter.html w templateUrl zawiera trochę kodu HTML dla nagłówka i stopki oraz
<div>
<router-outlet></router-outlet>

pomiędzy miejscem, w którym ładuje się apartment4Rent.component.html i pojawia się, zanim wypróbowałem ten reaktywny kod formularza. Moja struktura katalogów to app/components/input/apartment4Rent.component (s)
Co należy zmienić, aby formularze reaktywne działały?
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Czy dodałeś moduł formularzy reaktywnych Angular jako import do swojego modułu? Wygląda na to, że brakuje usług zarejestrowanych przez ten moduł.
(Rozmawiam przez telefon, przepraszam za krótką odpowiedź)

Edytować

Oto o co mi chodzi:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@anglar/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';@NgModule({
imports: [BrowserModule, ReactiveFormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

Zwróć uwagę na import ReactiveFormsModule
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Innym powodem tego błędu jest dwukrotne zaimportowanie formgroup. Usunąłem go w module aplikacji, teraz działa dla mnie, mam nadzieję, że komuś pomoże.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się