<p dir="auto"><strong>IMPORTANT</strong>: This repository's issues are reserved for feature requests and bug reports. Do not submit support requests here, see <a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question">https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question</a>.</p>
<p dir="auto"><strong>Steps to reproduce and a minimal demo of the problem</strong></p>
<ol dir="auto">
<li>Run <a href="http://plnkr.co/iYSO9HnUsk2xdgEoJQdI" rel="nofollow">this plunkr</a> in desktop Safari or Chrome and observe the full date being printed out</li>
<li>Run the plunkr in mobile Safari or a cordova app and observe the exception thrown</li>
</ol>
<p dir="auto"><em>What steps should we try in your demo to see the problem?</em></p>
<ol dir="auto">
<li>Open plunkr in browser.</li>
<li>See problem :)</li>
<li>Go to edit mode in plunkr</li>
<li>Open src/app.ts</li>
<li>Note the assigning of new Date in constructor, and the template binding to the date and pushing into a date pipe.</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    &lt;div&gt;
      &lt;h2&gt;Todays date is: {{viewModel.date | date:'fullDate'}}&lt;/h2&gt;
    &lt;/div&gt;
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
    this.viewModel = {};
    this.viewModel.date = new Date();
  }
}"><pre class="notranslate"><code class="notranslate">//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    &lt;div&gt;
      &lt;h2&gt;Todays date is: {{viewModel.date | date:'fullDate'}}&lt;/h2&gt;
    &lt;/div&gt;
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
    this.viewModel = {};
    this.viewModel.date = new Date();
  }
}
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Exception with thrown value: ReferenceError: Can't find variable: Intl"><pre class="notranslate"><code class="notranslate">Exception with thrown value: ReferenceError: Can't find variable: Intl
</code></pre></div>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">No exception occur</p>
<p dir="auto"><strong>Other information</strong></p>
<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
[x] 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
[x] 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">Based on other form input, I'd like to disable individual radio options in a radio form control, but the current disable() method only allows to disable all radios of a group or none.</p>
<p dir="auto">Setting the [disabled] attribute of an individual radio input is not allowed here:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="It looks like you're using the disabled attribute with a reactive form directive. 
If you set disabled to true when you set up this control in your component class, 
the disabled attribute will actually be set in the DOM for you. 
We recommend using this approach to avoid 'changed after checked' errors."><pre class="notranslate"><code class="notranslate">It looks like you're using the disabled attribute with a reactive form directive. 
If you set disabled to true when you set up this control in your component class, 
the disabled attribute will actually be set in the DOM for you. 
We recommend using this approach to avoid 'changed after checked' errors.
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">I can access and disable/enable individual radio input elements.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    &lt;div&gt;
      &lt;form [formGroup]=&quot;myForm&quot;&gt;
        &lt;input type=&quot;radio&quot; id=&quot;r1&quot; formControlName=&quot;myRadio&quot; value=&quot;1&quot;/&gt;&lt;label for=&quot;r1&quot;&gt;Radio 1&lt;/label&gt;&lt;br&gt;
        &lt;input type=&quot;radio&quot; id=&quot;r2&quot; formControlName=&quot;myRadio&quot; value=&quot;2&quot;/&gt;&lt;label for=&quot;r2&quot;&gt;Radio 2&lt;/label&gt;&lt;br&gt;
        &lt;input type=&quot;radio&quot; id=&quot;r3&quot; formControlName=&quot;myRadio&quot; value=&quot;3&quot;/&gt;&lt;label for=&quot;r3&quot;&gt;Radio 3&lt;/label&gt;&lt;br&gt;
        &lt;button (click)=&quot;disableRadio()&quot;&gt;Disable Radio 3 only&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  `,
})
export class App {
  myForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.myForm = formBuilder.group({
      myRadio: &quot;1&quot;
    });
    this.myForm.valueChanges.subscribe(something =&gt; {
      console.log(this.myForm.value.myRadio);
    });
  }
  disableRadio():void {
    this.myForm.controls.myRadio.disable(); 
    //***I'd like to disable only the 3rd radio here, not all of them.***
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}"><pre class="notranslate"><code class="notranslate">import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    &lt;div&gt;
      &lt;form [formGroup]="myForm"&gt;
        &lt;input type="radio" id="r1" formControlName="myRadio" value="1"/&gt;&lt;label for="r1"&gt;Radio 1&lt;/label&gt;&lt;br&gt;
        &lt;input type="radio" id="r2" formControlName="myRadio" value="2"/&gt;&lt;label for="r2"&gt;Radio 2&lt;/label&gt;&lt;br&gt;
        &lt;input type="radio" id="r3" formControlName="myRadio" value="3"/&gt;&lt;label for="r3"&gt;Radio 3&lt;/label&gt;&lt;br&gt;
        &lt;button (click)="disableRadio()"&gt;Disable Radio 3 only&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  `,
})
export class App {
  myForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.myForm = formBuilder.group({
      myRadio: "1"
    });
    this.myForm.valueChanges.subscribe(something =&gt; {
      console.log(this.myForm.value.myRadio);
    });
  }
  disableRadio():void {
    this.myForm.controls.myRadio.disable(); 
    //***I'd like to disable only the 3rd radio here, not all of them.***
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}
</code></pre></div>
<p dir="auto"><a href="http://plnkr.co/edit/J4pr2FJUs8IZdEldYz92?p=preview" rel="nofollow">http://plnkr.co/edit/J4pr2FJUs8IZdEldYz92?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">Based on other form input, I'd like to disable individual radio options in a form.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li><strong>Angular version:</strong> 2.3.0</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> [all]</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [TypeScript]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>