Question

我正在使用角度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代码。）

Answer 1

正如类似问题https://github.com/angular/angular/issues/8165中所述，这是一个已知问题（https://github.com/angular/angular/issues/6374）

Answer 2

你需要改用它：

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

因为ngControl用于内联表单声明，并且您使用FormBuilder来定义link控件。

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

2 个答案: