From e917d57dbb81c2f7b009faeac53a5363523b714f Mon Sep 17 00:00:00 2001
From: Andrew Kushnir <akushnir@google.com>
Date: Wed, 26 May 2021 12:34:01 -0700
Subject: [PATCH] docs: use `json` pipe in Forms guide instead of a temporary
 diagnostic field (#42364)

Closes #37283.

PR Close #42364
---
 aio/content/examples/forms/src/app/app.module.ts              | 2 ++
 .../examples/forms/src/app/hero-form/hero-form.component.html | 2 +-
 .../examples/forms/src/app/hero-form/hero-form.component.ts   | 2 --
 aio/content/guide/forms.md                                    | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/aio/content/examples/forms/src/app/app.module.ts b/aio/content/examples/forms/src/app/app.module.ts
index f5482927a9..1a94fe3e31 100644
--- a/aio/content/examples/forms/src/app/app.module.ts
+++ b/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: [
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
index d05b100d9b..44bbb7c52c 100644
--- 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
@@ -147,7 +147,7 @@
       <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"
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
index a82ecde070..5b77580bba 100644
--- 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
@@ -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
diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md
index dd6630d9d5..71fe2eb035 100644
--- a/aio/content/guide/forms.md
+++ b/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