I have a project in progress which involves using angular 2. I am currently working on forms and validation and have encountered an issue. Although I have found a workaround, I am curious to understand why my original code is not functioning properly.
Below is the revised version of my code:
@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" [class.error]="!channelForm.controls.link.valid">
<span class="static">http://www.mysite.com/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')
}
}
The issue lies in line 8-9 where there is a commented line. Using [class.error]="true" causes Angular to throw an error:
EXCEPTION: Error: Uncaught (in promise): No provider for ControlContainer! (NgControlName -> ControlContainer)
However, when I switch to using [ngClass], everything seems to work fine. I am curious to know why this is the case. (I can provide all the code from edit.component.ts if necessary).