<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[X ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
When i have checkbox inside a form with required attribute, if its unchecked, the validation is passing</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;label for=&quot;acceptance&quot; class=&quot;form-check-label&quot; 
     [ngClass]=&quot;{'field-error-text': acceptance.errors &amp;&amp; acceptance.errors.required}&quot;&gt;
   &lt;input [(ngModel)]=&quot;contact.acceptance&quot; 
       #acceptance=&quot;ngModel&quot; id=&quot;acceptance&quot; 
       name=&quot;acceptance&quot; type=&quot;checkbox&quot; class=&quot;form-check-input&quot; 
       required&gt; Please accept lorem ipsum terms conditions.
 &lt;/label&gt;"><pre class="notranslate"><code class="notranslate">&lt;label for="acceptance" class="form-check-label" 
     [ngClass]="{'field-error-text': acceptance.errors &amp;&amp; acceptance.errors.required}"&gt;
   &lt;input [(ngModel)]="contact.acceptance" 
       #acceptance="ngModel" id="acceptance" 
       name="acceptance" type="checkbox" class="form-check-input" 
       required&gt; Please accept lorem ipsum terms conditions.
 &lt;/label&gt;
</code></pre></div>
<p dir="auto">submit button is always enabled on unchecked field</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button (click)=&quot;submit()&quot; [disabled]=&quot;!contactForm.form.valid&quot; type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;"><pre class="notranslate"><code class="notranslate">&lt;button (click)="submit()" [disabled]="!contactForm.form.valid" type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
</code></pre></div>
<p dir="auto">all this code is inside a form tag like</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;form #contactForm=&quot;ngForm&quot;&gt;"><pre class="notranslate"><code class="notranslate">&lt;form #contactForm="ngForm"&gt;
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">If an input is required, validation should not pass and in this case, button should be disabled</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
I was able to reproduce the behavior even on plunkr<br>
<a href="http://plnkr.co/edit/iG5fpGo8DqHtIKLnrDrp?p=preview" rel="nofollow">http://plnkr.co/edit/iG5fpGo8DqHtIKLnrDrp?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
For example the use case here is a terms and conditions acceptance, so user has to accept the check all the time</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
El Capitan, MacOS, Atom, NPM, browser sync</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X<br>
Tried on 2.1</li>
<li><strong>Browser:</strong><br>
Tried Chrome 53, but probably same on other browsers</li>
<li><strong>Language:</strong><br>
Typescript</li>
<li><strong>Node (for AoT issues):</strong>  =<br>
v5.2.0</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">Given an <code class="notranslate">&lt;input type="checkbox"&gt;</code> with the <code class="notranslate">required</code> attribute, <code class="notranslate">ngModel</code> correctly considers it invalid to start with. Checking it correctly makes it valid, but after unchecking it it's still valid.</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">A required checkbox should always be invalid if it's not checked.</p>
<p dir="auto"><strong>Reproduction of the problem</strong></p>
<p dir="auto"><a href="http://plnkr.co/edit/GZI2fiZ65qtJQIjJbZLh?p=preview" rel="nofollow">http://plnkr.co/edit/GZI2fiZ65qtJQIjJbZLh?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">HTML5 Form Validation doesn't allow submitting a form if a required checkbox is unchecked. (Or at least that's how Chrome and Firefox work.)</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.6</li>
<li><strong>Browser:</strong> [all]</li>
<li><strong>Language:</strong> [all]</li>
</ul>