What is the proper way to set up binding to a class object with all properties valid but empty?
Success...If the component is defined like this:
export class BioComponent implements OnInit {
bio : Bio = { id : 1, FirstName : "", LastName : ""};
constructor() { }
ngOnInit() {
}
}
When the user edits in the view, the following bindings function correctly, and the third line below displays the user's input.
<td><input [(ngModel)]="bio.FirstName" placeholder="Your first name"></td>
<td><input [(ngModel)]="bio.LastName" placeholder="Your last name"></td>
<td>{{bio.FirstName + ' ' + bio.LastName}}</td>
Failure
If bio : Bio = new Bio(); is used, then the third item displays undefined undefined until the user enters text into both input fields.
In Conclusion I'm looking to avoid needing to declare each property like FirstName : "",. How can a new object be instantiated in Angular/TypeScript without these declarations?