Question

我正在使用角度应用程序创建一个表单..我已经FormsModule中的'@angular/forms'导入app.module.ts但是我仍然没有ControlContainer的提供程序

错误日志：

Uncaught Error: Template parse errors:
No provider for ControlContainer ("
                <span>Product Catalog</span>
            </h4>
        [ERROR ->]<form [formGroup]="productSearchForm" (ngSubmit)="onSubmit()" class="d-flex md-form justify-content-c"): ng:///ViewsModule/ProductCatalogComponent.html@8:8
No provider for NgControl ("orm" (ngSubmit)="onSubmit()" class="d-flex md-form justify-content-center form-inline">
            [ERROR ->]<select class="custom-select mb-2 mr-sm-2 mb-sm-0" formControlName="f_categoryId">
            <optio"): ng:///ViewsModule/ProductCatalogComponent.html@9:12
No provider for NgControl ("
            </select>

            [ERROR ->]<input type="search" formControlName="f_productDescription" placeholder="Seach the products" aria-lab"): ng:///ViewsModule/ProductCatalogComponent.html@16:12
    at syntaxError (compiler.js:215)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
    at compiler.js:22639
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
    at compiler.js:22549
    at Object.then (compiler.js:206)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)

我的代码如下，

产品catalog.component.html

<div class="card mb-4 wow fadeIn">
    <div class="card-body d-sm-flex justify-content-between">
            <h4 class="mb-sm-0 pt-3">
                <span>Product Catalog</span>
            </h4>
        <form [formGroup]="productSearchForm" (ngSubmit)="onSubmit()" class="d-flex md-form justify-content-center form-inline">
            <select class="custom-select mb-2 mr-sm-2 mb-sm-0" formControlName="f_categoryId">
            <option selected>Choose Category</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            </select>

            <input type="search" formControlName="f_productDescription" placeholder="Seach the products" aria-label="Search" class="form-control">      
            <button type="submit" class="btn btn-primary"> <i class="fa fa-search"></i></button>
        </form>
    </div>
</div>

产品catalog.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { InventoryService } from '../../_services/inventory.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ProductView } from '../../_models/product-view';
import { Category } from '../../_models/category';
import { OrderService } from '../../_services/order.service';

@Component({
  selector: 'app-product-catalog',
  templateUrl: 'product-catalog.component.html',
  styleUrls: ['product-catalog.component.scss'],
})
export class ProductCatalogComponent implements OnInit {

  public selectedId;
  public products: ProductView[];
  public categories: Category[];
  productSearchForm: FormGroup;

  constructor( private router: Router, private route: ActivatedRoute, 
     private inventoryService: InventoryService, private formBuilder: FormBuilder
    , private orderService: OrderService ) { }

  ngOnInit() {
    this.productSearchForm = this.formBuilder.group({
      f_productDescription: ['', Validators.required],
      f_categoryId: []
    });

    this.route.paramMap.subscribe(
      (params : ParamMap) => {
        this.selectedId = params.get('id');
      }
    );

    this.inventoryService.getProductCategories()
               .subscribe(data => this.categories = data) 
  }


  onSubmit(){
    //stop here if form is invalid
    if (this.productSearchForm.invalid) {
        return;
    }
    console.log('--------product-catalog.component.ts------------onSubmit()---------'+JSON.stringify(this.productSearchForm.value));
     this.inventoryService.getProducts(this.productSearchForm.value)
                .subscribe(data => this.products = data); 
  }

  onSelect(product){
    this.router.navigate(['/products',product.id]);
  }

  addToCart(product){
    console.log('--------product-catalog.component.ts------------addToCart()---------productId:'+product.productId);
     this.orderService.addToCart(product.productId,1)
    .subscribe(data => console.log("data:"+JSON.stringify(data)));

  }

  isSelected(product) { return product.id == this.selectedId; }
}

view.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FooterComponent } from '../main-layout/footer/footer.component';
import { Dashboard1Component } from './dashboards/dashboard1/dashboard1.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { ProductCatalogComponent } from './product-catalog/product-catalog.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
  ],
  declarations: [
    FooterComponent,
    Dashboard1Component,
    ProductCatalogComponent
  ],
  exports: [
    FooterComponent,    
    Dashboard1Component,
    ProductCatalogComponent
  ],
  schemas: [NO_ERRORS_SCHEMA]
})
export class ViewsModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutes } from './app.routes.service';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

import { ViewsModule } from './views/views.module';
import { ErrorModule } from './views/errors/error.module';
import { HttpClientModule } from '@angular/common/http';

// main layout
import { NavigationModule } from './main-layout/navigation/navigation.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NavigationModule,
    AppRoutes,
    RouterModule,
    ViewsModule,
    ErrorModule,
    FormsModule, 
    ReactiveFormsModule,
    MDBBootstrapModule.forRoot(),
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

请帮帮我..提前致谢..

Answer 1

它不是FormsModule，而是ReactiveFormsModule。

Answer 2

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

以内 view.module.ts

Angular 6：Uncaught Error：模板解析错误

2 个答案: