html – 没有ControlContainer的提供者和ControlContainer的提供者

概述我正在使用Angular2处理应用程序.   我试图在我的应用程序中使用Reactive Forms但我遇到了一些错误： 第一个错误是关于NgControl,如下所示： No provider for NgControl (“ div class=”col-md-8″ [ERROR ->]input class=”form-control” id=”productNameId” “): Produ 我正在使用Angular2处理应用程序.
  我试图在我的应用程序中使用Reactive Forms但我遇到了一些错误：

第一个错误是关于NgControl,如下所示：

No provIDer for NgControl (“

div class=”col-md-8″
[ERROR ->]input class=”form-control”
ID=”productnameID”
“): ProductEditComponent@16:24

第二个错误是关于ControlContainer,如下所示：

No provIDer for ControlContainer (”
div
[ERROR ->]div formArrayname=”Tags”>

div class=”row”>

button cl”):

htmm文件如下：

<div >   <div >      {{pageTitle}}</div><div >    <form           novalIDate          (ngsubmit)="saveProduct()"          formGroup="productForm" >        <fIEldset>            <div                   [ngClass]="{'has-error': displayMessage.productname }">                <label  for="productnameID">Product name</label>                <div >                    <input                              ID="productnameID"                             type="text"                             placeholder="name (required)"                             formControlname="productname" />                    <span  *ngIf="displayMessage.productname">                            {{displayMessage.productname}}                    </span>                </div>            </div> <div formArrayname="Tags">                <div >                    <button                             type="button"                            (click)="addTag()">Add Tag                    </button>                </div>                <div                     *ngFor="let tag of Tags.controls; let i=index" >                    <label  [attr.for]="i">Tag</label>                    <div >                        <input                                  [ID]="i"                                 type="text"                                 placeholder="Tag"                                 formControlname="i" />                    </div>                </div>            </div>    <!--more pIEce of code here -->

我的组件文件如下：

import { Component,OnInit,AfterVIEwInit,OnDestroy,VIEwChildren,ElementRef } from '@angular/core';         import { FormBuilder,FormGroup,FormControl,FormArray,ValIDators,FormControlname,NgForm } from '@angular/forms';         import { ActivatedRoute,Router  } from '@angular/router';       import 'rxJs/add/operator/debounceTime';       import 'rxJs/add/observable/fromEvent';       import 'rxJs/add/observable/merge';         import { Observable } from 'rxJs/Observable';         import { Subscription } from 'rxJs/Subscription';         import { IProduct } from './product';         import { ProductService } from './product.service';         import { NumberValIDators } from '../shared/number.valIDator';         import { GenericValIDator } from '../shared/generic-valIDator';  @Component({      templateUrl: './product-edit.component.HTML'   })  export class ProductEditComponent implements OnInit,OnDestroy {    @VIEwChildren(FormControlname,{ read: ElementRef }) forminputElements: ElementRef[];pageTitle: string = 'Product Edit';errorMessage: string;productForm: FormGroup;product: IProduct;private sub: Subscription;// Use with the generic valIDation message classdisplayMessage: { [key: string]: string } = {};private valIDationMessages: { [key: string]: { [key: string]: string } };private genericValIDator: GenericValIDator;get Tags(): FormArray {    return <FormArray>this.productForm.get('Tags');}constructor(private fb: FormBuilder,private route: ActivatedRoute,private router: Router,private productService: ProductService) {    // defines all of the valIDation messages for the form.    // These Could instead be retrIEved from a file or database.    this.valIDationMessages = {        productname: {            required: 'Product name is required.',minlength: 'Product name must be at least three characters.',maxlength: 'Product name cannot exceed 50 characters.'        },productCode: {            required: 'Product code is required.'        },starrating: {            range: 'Rate the product between 1 (lowest) and 5 (highest).'        }    };    // define an instance of the valIDator for use with this form,// passing in this form's set of valIDation messages.    this.genericValIDator = new GenericValIDator(this.valIDationMessages);}ngOnInit(): voID {    this.productForm = this.fb.group({        productname: ['',[ValIDators.required,ValIDators.minLength(3),ValIDators.maxLength(50)]],productCode: ['',ValIDators.required],starrating: ['',NumberValIDators.range(1,5)],Tags: this.fb.array([]),description: ''    });    // Read the product ID from the route parameter    this.sub = this.route.params.subscribe(        params => {            let ID = +params['ID'];            this.getProduct(ID);        }    );}ngOnDestroy(): voID {    this.sub.unsubscribe();}ngAfterVIEwInit(): voID {    // Watch for the blur event from any input element on the form.    let controlBlurs: Observable<any>[] = this.forminputElements        .map((formControl: ElementRef) => Observable.fromEvent(formControl.nativeElement,'blur'));    // Merge the blur event observable with the valueChanges observable    Observable.merge(this.productForm.valueChanges,...controlBlurs).debounceTime(800).subscribe(value => {        this.displayMessage = this.genericValIDator.processMessages(this.productForm);    });}addTag(): voID {    this.Tags.push(new FormControl());}getProduct(ID: number): voID {    this.productService.getProduct(ID)        .subscribe(            (product: IProduct) => this.onProductRetrIEved(product),(error: any) => this.errorMessage = <any>error        );}onProductRetrIEved(product: IProduct): voID {    if (this.productForm) {        this.productForm.reset();    }    this.product = product;    if (this.product.ID === 0) {        this.pageTitle = 'Add Product';    } else {        this.pageTitle = `Edit Product: ${this.product.productname}`;    }    // Update the data on the form    this.productForm.patchValue({        productname: this.product.productname,productCode: this.product.productCode,starrating: this.product.starrating,description: this.product.description    });    this.productForm.setControl('Tags',this.fb.array(this.product.Tags || []));}deleteProduct(): voID {    if (this.product.ID === 0) {        // Don't delete,it was never saved.        this.onSaveComplete();   } else {        if (confirm(`Really delete the product: ${this.product.productname}?`)) {            this.productService.deleteProduct(this.product.ID)                .subscribe(                    () => this.onSaveComplete(),(error: any) => this.errorMessage = <any>error                );        }    }}saveProduct(): voID {    if (this.productForm.dirty && this.productForm.valID) {        // copy the form values over the product object values        let p = Object.assign({},this.product,this.productForm.value);        this.productService.saveProduct(p)            .subscribe(                () => this.onSaveComplete(),(error: any) => this.errorMessage = <any>error            );    } else if (!this.productForm.dirty) {        this.onSaveComplete();    }}onSaveComplete(): voID {    // reset the form to clear the flags    this.productForm.reset();    this.router.navigate(['/products']);   } }

我试图解决这个问题超过2天,但我仍然没有解决方案.我在stackoverflow中看到了很多其他答案,但没有一个能解决我的问题.

解决方法 从app.module.ts文件中的@ angular / forms导入Forms Module和ReactiveFormsModule 总结

以上是内存溢出为你收集整理的html – 没有ControlContainer的提供者和ControlContainer的提供者全部内容，希望文章能够帮你解决html – 没有ControlContainer的提供者和ControlContainer的提供者所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。