My interface is quite simple:
(models.ts)
export interface User{
Id : number;
FirstName : string;
LastName : string;
Email: string;
PhoneNumber: string;
}
As for my form, it's also pretty straightforward:
(app.component.html)
<fieldset class='form-group' >
<h2>Create New User</h2>
<label>First Name: <input type="text" [(ngModel)]='FirstName'></label><br>
<label>Last Name: <input type="text" [(ngModel)]='LastName'></label><br>
<label>Phone number: <input type="phone"[(ngModel)]='PhoneNumber'></label><br>
<label>Email Address: <input type="email" [(ngModel)]='Email'></label><br>
<button (click)="createNewUser()">Create User</button>
</fieldset>
I currently bind my data to simple strings in order to create an object based on them. This method works but feels a bit cluttered. I was considering creating a new empty object and then assigning the values directly to it like this:
(app.component.ts)
userToCreate: User;
(app.component.html)
<label>First Name: <input type="text" [(ngModel)]='userToCreate.FirstName'></label><br>
However, when attempting this approach, TypeScript throws an error message which reads:
Cannot read property 'FirstName' of undefined
What am I doing wrong here, or is this not feasible?