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
This commit is contained in:
Paul Gschwendtner 2019-02-01 14:39:17 +01:00 committed by Matias Niemelä
parent e4fb93c28a
commit 5a257d02a6
1 changed files with 16 additions and 9 deletions

View File

@ -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>