docs: use json pipe in Forms guide instead of a temporary diagnosti…

…c field (angular#42364)

Closes angular#37283.

PR Close angular#42364

aio/content/examples/forms/src/app/app.module.ts

@@ -1,6 +1,7 @@
 // #docregion
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
@@ -9,6 +10,7 @@ import { HeroFormComponent } from './hero-form/hero-form.component';
 @NgModule({
   imports: [
     BrowserModule,
+    CommonModule,
     FormsModule
   ],
   declarations: [

aio/content/examples/forms/src/app/hero-form/hero-form.component.html

@@ -147,7 +147,7 @@ <h1>Hero Form</h1>
       <form #heroForm="ngForm">
       <!-- #enddocregion template-variable-->
     <!-- #docregion ngModel-2-->
-        {{diagnostic}}
+        {{ model | json }}
         <div class="form-group">
           <label for="name">Name</label>
           <input type="text" class="form-control" id="name"

aio/content/examples/forms/src/app/hero-form/hero-form.component.ts

@@ -23,8 +23,6 @@ export class HeroFormComponent {
   // #enddocregion submitted
 
   // #enddocregion final
-  // TODO: Remove this when we're done
-  get diagnostic() { return JSON.stringify(this.model); }
   // #enddocregion v1
 
   // #docregion final, new-hero

aio/content/guide/forms.md

@@ -220,7 +220,7 @@ Any unique value will do, but using a descriptive name is helpful.
 
 2. You can now remove the diagnostic messages that show interpolated values.
 
-3. To confirm that two-way data binding works for the entire hero model, add a new binding at the top to the component's `diagnostic` property.
+3. To confirm that two-way data binding works for the entire hero model, add a new text binding with the [`json` pipe](api/common/JsonPipe) (which would serialize the data to a string) at the top to the component's template.
 
 After these revisions, the form template should look like the following:
 
@@ -238,7 +238,7 @@ If you run the app now and change every hero model property, the form might disp
 
 The diagnostic near the top of the form confirms that all of your changes are reflected in the model.
 
-4. When you have observed the effects, you can delete the `{{diagnostic}}` binding.
+4. When you have observed the effects, you can delete the `{{ model | json }}` text binding.
 
 ## Track control states