![](/img/trans.png)
[英]Angular 9 “No provider for ControlContainer” VSCode error with a nested Form Builder Form Group
[英]Angular 2 : using [class.someClass] causes `No provider for ControlContainer!`?
我正在使用angular 2進行項目。我正在處理表單和驗證,但我遇到了問題。 我剛剛找到了一種解決方法,但是我想知道為什么我的原始代碼不起作用。
這是我的代碼(折射):
@Component({
directives: [ DisplayErrorComponent ],
styleUrls: ["src/modules/component@channel/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"
,Angular拋出一個錯誤:
EXCEPTION: Error: Uncaught (in promise): No provider for ControlContainer! (NgControlName -> ControlContainer)
但是,當我嘗試使用[ngClass]
,一切正常。 為什么呢 (如果需要,我可以發布所有edit.component.ts
代碼)。
您需要改用以下方法:
<input type="text" name="link"
[ngFormControl]="channelForm.controls.link" required>
因為ngControl
用於內聯表單聲明,所以您使用FormBuilder定義link
控件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.