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:
parent
e4fb93c28a
commit
5a257d02a6
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in New Issue