Ошибки синтаксического анализа шаблона: невозможно связать с formGroup, поскольку оно не является известным свойством form - PullRequest
Новая
       41

Ошибки синтаксического анализа шаблона: невозможно связать с formGroup, поскольку оно не является известным свойством form

0 голосов
/ 12 мая 2018

У меня угловая маршрутизация, в одном из компонентов у меня есть простая форма входа и я предоставляю formGroup в шаблоне, который показывает ошибку выше.

Шаги: импорт модуля ReactiveFormsModule в модуль приложения.

В компонентах маршрутизации:

app.routingmodule.ts 

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { CatalogViewComponent } from './views/catalog/catalog.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, CatalogViewComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { path: 'catalog', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
    ])
  ],
  exports: [
    RouterModule
  ],
  providers: [],

})
export class AppRoutingModule {}

catalog.component.ts 

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';


import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'reactiveform',
  templateUrl: 'catalog.component.html',
})
export class CatalogViewComponent implements OnInit {

  form: FormGroup;

  constructor() {


  }


  ngOnInit() {

    this.form = new FormGroup({
      name: new FormControl(''),
      userName: new FormControl('')
    });

    console.log(this.form);

  }


  processForm() {
    console.log("formProcessing" + this.form.value);
  }
}

catalog.component.html 

<form [formGroup]="form" (ngSubmit)="processForm()" >
    <div class="form-group">
        <label for="name">Name </label>
        <input type="text" class="form-control" name="name" formControlName="name" required>
    </div>

    <div class="form-group">
        <label for="userName">Username </label>
        <input type="text" class="form-control" name="userName" formControlName="userName" required>
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-danger">Submit   </button>
    </div>
</form>

Демонстрационный URL:

https://stackblitz.com/edit/angular-router-basic-form?file=app%2Fviews%2Fcatalog%2Fcatalog.component.html

Если я удаляю formGroup в Html, приложение работает нормально

1 Ответ

0 голосов
/ 12 мая 2018

Вы указали CatalogViewComponent в AppRoutingModule, поэтому вам нужно импортировать ReactiveFormsModule туда:

app.routing.module.ts 

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, CatalogViewComponent
  ],
  imports: [
    ReactiveFormsModule, <=============================== add this
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { path: 'catalog', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
    ])
  ],
  exports: [
    RouterModule
  ],
  providers: [],

})
export class AppRoutingModule {}

Forker Stackblitz

См. Также

Другой способ - создать SharedModule: 

@NgModule({
  ...
  exports: [
    ReactiveFormsModule
  ]
})
export class SharedModule {}

и импортировать его в любой модуль, где вы используете реактивные формы

...