<p dir="auto">This code example</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;label [class.has-error]=&quot;!username.valid&quot;&gt;
            &lt;div&gt;Login&lt;/div&gt;
            &lt;input type=&quot;text&quot; ngControl=&quot;username&quot; #username=&quot;ngForm&quot; class=&quot;form-control&quot; placeholder=&quot;Login&quot; required/&gt;
&lt;/label&gt;"><pre class="notranslate"><code class="notranslate">&lt;label [class.has-error]="!username.valid"&gt;
            &lt;div&gt;Login&lt;/div&gt;
            &lt;input type="text" ngControl="username" #username="ngForm" class="form-control" placeholder="Login" required/&gt;
&lt;/label&gt;
</code></pre></div>
<p dir="auto">Error: Uncaught (in promise): No provider for ControlContainer! (NgControlName -&gt; ControlContainer)</p>
<p dir="auto">but when i use</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ngClass]=&quot;{'has-error':!username.valid}&quot;"><pre class="notranslate"><code class="notranslate">[ngClass]="{'has-error':!username.valid}"
</code></pre></div>
<p dir="auto">or simply add ngClass</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ngClass] [class.has-error]=&quot;!username.valid&quot;"><pre class="notranslate"><code class="notranslate">[ngClass] [class.has-error]="!username.valid"
</code></pre></div>
<p dir="auto">works as expected, but in docs no any word about ngClass requirement</p>
<p dir="auto">I've come across a really weird error right after upgrading to Beta 1: Every time I drop a <code class="notranslate">[class.whatever]</code> or any other attribute binding within a nested DOM element wrapped by a <code class="notranslate">ngForm</code> element I get the infamous <code class="notranslate">No provider for ControlContainer! (NgControlName -&gt; ControlContainer)</code> exception.</p>
<p dir="auto">I've put together a tiny sample component to replicate the error:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { bootstrap } from 'angular2/platform/browser';
import { Component } from 'angular2/core';
import { FormBuilder, ControlGroup, Control, Validators, FORM_PROVIDERS, FORM_DIRECTIVES } from 'angular2/common';

@Component({
    selector: 'test-form',
    directives: [FORM_DIRECTIVES],
    template: `
        &lt;form [ngFormModel]=&quot;testForm&quot;&gt;
            &lt;p *ngIf=&quot;!testControl.valid&quot;&gt;Form is empty and hence not valid&lt;/p&gt;

            &lt;!-- This little guy below will make Angular 2 complain --&gt;
            &lt;div [class.error]=&quot;!testControl.valid&quot;&gt;
                &lt;input type=&quot;text&quot; ngControl=&quot;testControl&quot;&gt;
            &lt;/div&gt;

        &lt;/form&gt;
    `
})
class TestForm {
    testForm: ControlGroup;
    testControl: Control;

    constructor(private formBuilder: FormBuilder) {
        this.testControl = new Control('', Validators.required);
        this.testForm = this.formBuilder.group({
            testControl: this.testControl
        });
    }
}

bootstrap(TestForm, [FORM_PROVIDERS]);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">bootstrap</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/platform/browser'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/core'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">FormBuilder</span><span class="pl-kos">,</span> <span class="pl-v">ControlGroup</span><span class="pl-kos">,</span> <span class="pl-v">Control</span><span class="pl-kos">,</span> <span class="pl-v">Validators</span><span class="pl-kos">,</span> <span class="pl-c1">FORM_PROVIDERS</span><span class="pl-kos">,</span> <span class="pl-c1">FORM_DIRECTIVES</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/common'</span><span class="pl-kos">;</span>

@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'test-form'</span><span class="pl-kos">,</span>
    <span class="pl-c1">directives</span>: <span class="pl-kos">[</span><span class="pl-c1">FORM_DIRECTIVES</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">        &lt;form [ngFormModel]="testForm"&gt;</span>
<span class="pl-s">            &lt;p *ngIf="!testControl.valid"&gt;Form is empty and hence not valid&lt;/p&gt;</span>
<span class="pl-s"></span>
<span class="pl-s">            &lt;!-- This little guy below will make Angular 2 complain --&gt;</span>
<span class="pl-s">            &lt;div [class.error]="!testControl.valid"&gt;</span>
<span class="pl-s">                &lt;input type="text" ngControl="testControl"&gt;</span>
<span class="pl-s">            &lt;/div&gt;</span>
<span class="pl-s"></span>
<span class="pl-s">        &lt;/form&gt;</span>
<span class="pl-s">    `</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-v">TestForm</span> <span class="pl-kos">{</span>
    <span class="pl-c1">testForm</span>: <span class="pl-c1">ControlGroup</span><span class="pl-kos">;</span>
    <span class="pl-c1">testControl</span>: <span class="pl-v">Control</span><span class="pl-kos">;</span>

    <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">private</span> <span class="pl-s1">formBuilder</span>: <span class="pl-v">FormBuilder</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">testControl</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Control</span><span class="pl-kos">(</span><span class="pl-s">''</span><span class="pl-kos">,</span> <span class="pl-v">Validators</span><span class="pl-kos">.</span><span class="pl-c1">required</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">testForm</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">formBuilder</span><span class="pl-kos">.</span><span class="pl-en">group</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
            <span class="pl-c1">testControl</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">testControl</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-en">bootstrap</span><span class="pl-kos">(</span><span class="pl-v">TestForm</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-c1">FORM_PROVIDERS</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Apparently this only occurs when attaching class or attribute bindings to nested elements. Whenever I bind class names by means of <code class="notranslate">ngClass</code> instead, the issue simply does not occur.</p>