From 5a257d02a6de8e66c2529552321f129dd3dc8d4d Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Fri, 1 Feb 2019 14:39:17 +0100
Subject: [PATCH] build: fix "person_management" playground example (#28490)

Currently when someone serves the "person_management" playground
example, there will be runtime exceptions by `@angular/forms` if
someone clicks on one of the two buttons rendered in the example.

This happens because the example is outdated and the input elements
using `ngModel` do not specify a proper "name" while being inside of
a `<form>` element. A name is required inside of a form. The failure
is not specific to Ivy and is not covered by any test because the e2e
tests for this example are just asserting that the page properly loads
(the error only shows up one of the buttons has been clicked)

This is the reason why these errors were never visibile to the e2e tests.
Though in order to make this example work, we should this fix these failures
so that the example can work as expected.

```
FullNameComponent.html:7 ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form
      control must be defined as 'standalone' in ngModelOptions.

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
    at Function.TemplateDrivenErrors.missingNameException (template_driven_errors.ts:40)
    at NgModel._checkName (ng_model.ts:319)
    at NgModel._checkForErrors (ng_model.ts:302)
    at NgModel.ngOnChanges (ng_model.ts:215)
    at Object.checkAndUpdateDirectiveInline (provider.ts:208)
    at checkAndUpdateNodeInline (view.ts:429)
    at checkAndUpdateNode (view.ts:389)
    at debugCheckAndUpdateNode (services.ts:431)
    at debugCheckDirectivesFn (services.ts:392)
    at Object.eval [as updateDirectives] (FullNameComponent.html:7)
```

PR Close #28490
---
 .../playground/src/person_management/index.ts | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/modules/playground/src/person_management/index.ts b/modules/playground/src/person_management/index.ts
index 3638ccecff..d981acad14 100644
--- a/modules/playground/src/person_management/index.ts
+++ b/modules/playground/src/person_management/index.ts
@@ -85,13 +85,15 @@ export class DataService {
       <form>
           <div>
             <label>
-              First: <input [(ngModel)]="person.firstName" type="text" placeholder="First name">
+              First: <input [(ngModel)]="person.firstName" type="text" placeholder="First name"
+                            name="firstName">
             </label>
           </div>
 
           <div>
             <label>
-              Last: <input [(ngModel)]="person.lastName" type="text" placeholder="Last name">
+              Last: <input [(ngModel)]="person.lastName" type="text" placeholder="Last name"
+                           name="lastName">
             </label>
           </div>
 
@@ -115,29 +117,34 @@ export class FullNameComponent {
     <div>
       <form>
         <div>
-					<label>First: <input [(ngModel)]="person.firstName" type="text" placeholder="First name"></label>
+					<label>First: <input [(ngModel)]="person.firstName" type="text" placeholder="First name"
+                               name="firstName"></label>
 				</div>
 
         <div>
-					<label>Last: <input [(ngModel)]="person.lastName" type="text" placeholder="Last name"></label>
+					<label>Last: <input [(ngModel)]="person.lastName" type="text" placeholder="Last name"
+                              name="lastName"></label>
 				</div>
 
         <div>
-					<label>Year of birth: <input [(ngModel)]="person.yearOfBirth" type="number" placeholder="Year of birth"></label>
+					<label>Year of birth: <input [(ngModel)]="person.yearOfBirth" type="number" placeholder="Year of birth"
+                                       name="yearOfBirth"></label>
           Age: {{person.age}}
 				</div>\
 
         <div *ngIf="person.mom != null">
 					<label>Mom:</label>
-          <input [(ngModel)]="person.mom.firstName" type="text" placeholder="Mom's first name">
-          <input [(ngModel)]="person.mom.lastName" type="text" placeholder="Mom's last name">
+          <input [(ngModel)]="person.mom.firstName" type="text" placeholder="Mom's first name" name="momFirstName">
+          <input [(ngModel)]="person.mom.lastName" type="text" placeholder="Mom's last name" name="momLastName">
           {{person.mom.fullName}}
 				</div>
 
         <div *ngIf="person.dad != null">
 					<label>Dad:</label>
-          <input [(ngModel)]="person.dad.firstName" type="text" placeholder="Dad's first name">
-          <input [(ngModel)]="person.dad.lastName" type="text" placeholder="Dad's last name">
+          <input [(ngModel)]="person.dad.firstName" type="text" placeholder="Dad's first name"
+                 name="dasFirstName">
+          <input [(ngModel)]="person.dad.lastName" type="text" placeholder="Dad's last name"
+                 name="dadLastName">
           {{person.dad.fullName}}
 				</div>