Angular 2：使用[class.someClass]会导致`没有提供ControlContainer！`？

我正在使用角2的项目。我正在处理表单和验证，我有一个问题。我刚刚找到了解决方法，但我想知道为什么我的原始代码不起作用。Angular 2：使用[class.someClass]会导致`没有提供ControlContainer！`？

这里是我的代码（refractored）：

@Component({ 
    directives: [ DisplayErrorComponent ], 
    styleUrls: ["src/modules/[email protected]/src/add/add.css"], 
    template: `   
     <form (ngSubmit)="onSubmit()" [ngFormModel]="channelForm"> 
      <label for="link"> 
       Customize the link 
       <!--<div class="link inputBordered inputTexted" [ngClass]="{error: !channelForm.controls.link.valid}">--> 
       <div class="link inputBordered inputTexted" [class.error]="!channelForm.controls.link.valid"> 
        <span class="static">http://www.monsite.fr/mediatheque/</span> 
        <input type="text" name="link" ngControl="link" required> 
       </div> 
      </label> 
      <input type="submit" value="Add" [disabled]="!channelForm.valid"> 
     </form> 
    ` 
}) 
export class EditComponent { 
    channel: Media; 
    channelForm: ControlGroup; 
    categories: Category[] = this._categoryService.listAll(); 

    constructor(fb: FormBuilder, private _categoryService: CategoryService, private _routeParams: RouteParams, private _mediaService: MediaService) { 
     this.channel = this._mediaService.getById(this._routeParams.get('id')); 
     this.channelForm = fb.group({ 
      link  : fb.control(this.channel.link, Validators.compose([Validators.required, UrlValidator])), 
     }); 
    } 

    onSubmit():void { 
     console.log('form submitted') 
    } 
}

的异常是在8-9线。您可以看到一条注释行。当我使用[class.error]="true"，角抛出一个错误：

EXCEPTION: Error: Uncaught (in promise): No provider for ControlContainer! (NgControlName -> ControlContainer)

但是，当我尝试用[ngClass]，一切正常。为什么？（如果需要，我可以发布所有edit.component.ts代码）。

来源

2016-04-21 Clément Flodrops

正如类似的问题https://github.com/angular/angular/issues/8165提到这是一个已知的问题（https://github.com/angular/angular/issues/6374）

来源

2016-04-21 12:09:54

您需要改用此：

<input type="text" name="link" 
    [ngFormControl]="channelForm.controls.link" required>

因为ngControl是内联形式声明，并使用FormBuilder定义您的link控制。

来源

2016-04-21 12:10:40

'ngControl'与'[ngFormModel]'一起使用，不依赖于'formBuilder'。 '[ngFormControl]'用作独立控件，不需要'[ngFormModel]'，因为它是父类。我可能错了，因为你是我拥有的知识的来源之一。 –

Angular 2：使用[class.someClass]会导致`没有提供ControlContainer！`？

回答

相关问题