docs(reactive-forms): add code for Validators.required

Author: kapunahelewong

public/docs/_examples/reactive-forms/ts/app/demo.module.ts

@@ -11,6 +11,7 @@ import { HeroDetailComponent4 } from './hero-detail-4.component';
 import { HeroDetailComponent5 } from './hero-detail-5.component';
 import { HeroDetailComponent6 } from './hero-detail-6.component';
 import { HeroDetailComponent7 } from './hero-detail-7.component';
+// import { Something } from './hero-detail-1.component';
 
 @NgModule({
   imports: [
@@ -25,7 +26,7 @@ import { HeroDetailComponent7 } from './hero-detail-7.component';
   HeroDetailComponent4,
   HeroDetailComponent5,
   HeroDetailComponent6,
-  HeroDetailComponent7 ],
+  HeroDetailComponent7],
   bootstrap:    [ DemoComponent ]
 })
 export class DemoModule { }

public/docs/_examples/reactive-forms/ts/app/hero-detail-1.component.html

@@ -10,5 +10,6 @@ <h3><i>FormGroup with a single FormControl</i></h3>
 
 
 <!--<input formControlName="name1">-->
-<input [formControl]="ctrl">
+<!--<input [formControl]="ctrl">-->
+
 <!-- #enddocregion basic-form-->

public/docs/_examples/reactive-forms/ts/app/hero-detail-1.component.ts

@@ -15,12 +15,12 @@ export class HeroDetailComponent1 {
     name: new FormControl()
   });
 // This requires a FormGroup
-  simpleFormControl = new FormControl({
-    name1: ''
-  })
+//   simpleFormControl = new FormControl({
+//     name1: ''
+//   })
 }
 // This one causes: Cannot find control with unspecified name attribute
-export class Something {
-  ctrl = new FormControl()
-}
+// export class Something {
+//   ctrl = new FormControl()
+// }
 // #enddocregion v1

public/docs/_examples/reactive-forms/ts/app/hero-detail-2.component.html

@@ -11,4 +11,6 @@ <h3><i>A FormGroup with a single FormControl using FormBuilder</i></h3>
 
 <!-- #docregion form-value-json -->
 <p>Form: {{ heroForm.value | json }}</p>
+<p>Form status: {{ heroForm.status }}</p>
+<p>Name status: {{ heroForm.get('name').status}}</p>
 <!-- #enddocregion form-value-json  -->

public/docs/_examples/reactive-forms/ts/app/hero-detail-2.component.ts

@@ -1,7 +1,7 @@
 /* tslint:disable:component-class-suffix */
 // #docregion imports
 import { Component }              from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 // #enddocregion imports
 
 @Component({
@@ -19,7 +19,7 @@ export class HeroDetailComponent2 {
 
   createForm() {
     this.heroForm = this.fb.group({
-      name: '', // <--- the FormControl called "name"
+      name: ['', Validators.required ], // <--- the FormControl called "name"
     });
   }
 }