docs: refactor template-driven forms doc as a tutorial (angular#36732)

rework content to meet current documentation standards and conventions, structure as tutorial document type PR Close angular#36732
DSC-FPTU-HCMC · Jun 3, 2020 · 382aa50 · 382aa50
1 parent 044a199
commit 382aa50
Show file tree

Hide file tree

Showing 8 changed files with 251 additions and 450 deletions.
diff --git a/aio/content/examples/forms/src/app/app.module.ts b/aio/content/examples/forms/src/app/app.module.ts
@@ -3,7 +3,7 @@ import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }   from '@angular/forms';
 
-import { AppComponent }  from './app.component';
+import { AppComponent }      from './app.component';
 import { HeroFormComponent } from './hero-form/hero-form.component';
 
 @NgModule({

diff --git a/aio/content/examples/forms/src/app/hero-form/hero-form.component.html b/aio/content/examples/forms/src/app/hero-form/hero-form.component.html
@@ -200,13 +200,4 @@ <h1>Hero Form</h1>
            (ngModelChange)="model.name = $event">
     TODO: remove this: {{model.name}}
   <!-- #enddocregion ngModel-3-->
-  <hr>
-  <!-- #docregion ngModelName-2 -->
-       <input type="text" class="form-control" id="name"
-         required
-         [(ngModel)]="model.name" name="name"
-         #spy>
-       <br>TODO: remove this: {{spy.className}}
-  <!-- #enddocregion ngModelName-2 -->
-
 </div>
diff --git a/aio/content/examples/forms/src/app/hero-form/hero-form.component.ts b/aio/content/examples/forms/src/app/hero-form/hero-form.component.ts
@@ -2,7 +2,7 @@
 // #docregion , v1, final
 import { Component } from '@angular/core';
 
-import { Hero }    from '../hero';
+import { Hero } from '../hero';
 
 @Component({
   selector: 'app-hero-form',

diff --git a/aio/content/guide/forms-overview.md b/aio/content/guide/forms-overview.md
@@ -279,11 +279,12 @@ Here are the steps performed in the model to view test.
 
 To learn more about reactive forms, see the following guides:
 
-* [Reactive forms](guide/reactive-forms) guide
-* [Form validation](guide/form-validation#reactive-form-validation) guide
-* [Building dynamic forms](guide/dynamic-form) tutorial
+* [Reactive forms](guide/reactive-forms)
+* [Form validation](guide/form-validation#reactive-form-validation)
+* [Dynamic forms](guide/dynamic-form)
 
 To learn more about template-driven forms, see the following guides:
 
-* [Building a template-driven form](guide/forms#template-driven-forms) tutorial
-* [Form validation](guide/form-validation#template-driven-validation) guide
+* [Building a template-driven form](guide/forms) tutorial
+* [Form validation](guide/form-validation#template-driven-validation)
+* `NgForm` directive API reference
diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md
diff --git a/aio/content/images/guide/forms/control-state-transitions-anim.gif b/aio/content/images/guide/forms/control-state-transitions-anim.gif
diff --git a/aio/content/images/guide/forms/ng-control-class-changes.png b/aio/content/images/guide/forms/ng-control-class-changes.png
diff --git a/aio/content/navigation.json b/aio/content/navigation.json
@@ -254,11 +254,6 @@
               "title": "Reactive Forms",
               "tooltip": "Create a reactive form using FormBuilder, groups, and arrays."
             },
-            {
-              "url": "guide/forms",
-              "title": "Template-driven Forms",
-              "tooltip": "Create a template-driven form using directives and Angular template syntax."
-            },
             {
               "url": "guide/form-validation",
               "title": "Validate form input",
@@ -749,6 +744,11 @@
           "url": "guide/router-tutorial",
           "title": "Using Angular Routes in a Single-page Application",
           "tooltip": "A tutorial that covers many patterns associated with Angular routing."
+        },
+        {
+          "url": "guide/forms",
+          "title": "Building a Template-driven Form",
+          "tooltip": "Create a template-driven form using directives and Angular template syntax."
         }
       ]
     },