docs(forms): add radio button examples (#11676)

modules/@angular/examples/forms/ts/radioButtons/e2e_test/radio_button_spec.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('radioButtons example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: protractor.ElementArrayFinder;
+  let paragraphs: protractor.ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/radioButtons/index.html');
+    inputs = element.all(by.css('input'));
+    paragraphs = element.all(by.css('p'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(inputs.get(0).getAttribute('checked')).toEqual(null);
+    expect(inputs.get(1).getAttribute('checked')).toEqual('true');
+    expect(inputs.get(2).getAttribute('checked')).toEqual(null);
+
+    expect(paragraphs.get(0).getText()).toEqual('Form value: { "food": "lamb" }');
+    expect(paragraphs.get(1).getText()).toEqual('myFood value: lamb');
+  });
+
+  it('update model and other buttons as the UI value changes', () => {
+    inputs.get(0).click();
+
+    expect(inputs.get(0).getAttribute('checked')).toEqual('true');
+    expect(inputs.get(1).getAttribute('checked')).toEqual(null);
+    expect(inputs.get(2).getAttribute('checked')).toEqual(null);
+
+    expect(paragraphs.get(0).getText()).toEqual('Form value: { "food": "beef" }');
+    expect(paragraphs.get(1).getText()).toEqual('myFood value: beef');
+  });
+});

modules/@angular/examples/forms/ts/radioButtons/module.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {RadioButtonComp} from './radio_button_example';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  declarations: [RadioButtonComp],
+  bootstrap: [RadioButtonComp]
+})
+export class AppModule {
+}

modules/@angular/examples/forms/ts/radioButtons/radio_button_example.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+// #docregion TemplateDriven
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form #f="ngForm">
+      <input type="radio" value="beef" name="food" [(ngModel)]="myFood"> Beef
+      <input type="radio" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
+      <input type="radio" value="fish" name="food" [(ngModel)]="myFood"> Fish
+    </form>
+    
+    <p>Form value: {{ f.value | json }}</p>  <!-- {food: 'lamb' } -->
+    <p>myFood value: {{ myFood }}</p>  <!-- 'lamb' -->
+  `,
+})
+export class RadioButtonComp {
+  myFood = 'lamb';
+}
+// #enddocregion

modules/@angular/examples/forms/ts/reactiveRadioButtons/e2e_test/reactive_radio_button_spec.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('radioButtons example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: protractor.ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/reactiveRadioButtons/index.html');
+    inputs = element.all(by.css('input'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(inputs.get(0).getAttribute('checked')).toEqual(null);
+    expect(inputs.get(1).getAttribute('checked')).toEqual('true');
+    expect(inputs.get(2).getAttribute('checked')).toEqual(null);
+
+    expect(element(by.css('p')).getText()).toEqual('Form value: { "food": "lamb" }');
+  });
+
+  it('update model and other buttons as the UI value changes', () => {
+    inputs.get(0).click();
+
+    expect(inputs.get(0).getAttribute('checked')).toEqual('true');
+    expect(inputs.get(1).getAttribute('checked')).toEqual(null);
+    expect(inputs.get(2).getAttribute('checked')).toEqual(null);
+
+    expect(element(by.css('p')).getText()).toEqual('Form value: { "food": "beef" }');
+  });
+});

modules/@angular/examples/forms/ts/reactiveRadioButtons/module.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {ReactiveRadioButtonComp} from './reactive_radio_button_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [ReactiveRadioButtonComp],
+  bootstrap: [ReactiveRadioButtonComp]
+})
+export class AppModule {
+}

modules/@angular/examples/forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+// #docregion Reactive
+import {Component} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form [formGroup]="form">
+      <input type="radio" formControlName="food" value="beef" > Beef
+      <input type="radio" formControlName="food" value="lamb"> Lamb
+      <input type="radio" formControlName="food" value="fish"> Fish
+    </form>
+    
+    <p>Form value: {{ form.value | json }}</p>  <!-- {food: 'lamb' } -->
+  `,
+})
+export class ReactiveRadioButtonComp {
+  form = new FormGroup({
+    food: new FormControl('lamb'),
+  });
+}
+// #enddocregion