How to get json and display it by user id - json

Question

I want to display the data of the selected user in angular 2. I make a service to get the data from API
getUserById(id: string): Promise<User> {
const url ='api/user/${id}';
return this.httpClient.get(url)
.toPromise()
.then(response => response.json() as User)
.catch(this.handleError); }
and this is my controller
user: User;
constructor(private userService: UserService) {
userService.getUserById('45835708-f55a-40fb-878f-33b9c920e196')
.then(hasil => this.user = hasil)
.catch(this.handleError);
}
and here is my template
<div class="form-group">
<label class="col-sm-2 control-label">FULL NAME</label>
<div class="col-sm-6">
<input class="form-control" type="text" value="" disabled>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">USER NAME</label>
<div class="col-sm-6">
<input class="form-control" type="text" value="" disabled>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">PASSWORD</label>
<div class="col-sm-6">
<input class="form-control" type="password" value="" disabled>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">DATE OF BIRTH</label>
<div class="col-sm-6">
<input class="form-control" type="text" value="" disabled>
</div>
</div>
How to display the json to my template? Do I make correct service and controller?

Answer 1

You can choose to use template driven forms or reactive driven forms.
this.user object can be a model to that form, and when you input something into html input elements, object will update automatically:
<div class="form-group">
<label class="col-sm-2 control-label">FULL NAME</label>
<div class="col-sm-6">
<input class="form-control" type="text" value="" [(ngModel)]="user.fullName" disabled>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">USER NAME</label>
<div class="col-sm-6">
<input class="form-control" type="text" value="" [(ngModel)]="user.username" disabled>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">PASSWORD</label>
<div class="col-sm-6">
<input class="form-control" type="password" value="" [(ngModel)]="user.password" disabled>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">DATE OF BIRTH</label>
<div class="col-sm-6">
<input class="form-control" type="date" value="" [(ngModel)]="user.dateOfBirth" disabled>
</div>
</div>
If you want to add some validator, you should go with Reactive forms:
https://angular.io/docs/ts/latest/guide/reactive-forms.html
The principle here is to create a form group and define individual properties with their initial values and validator.

Answer 2

First make sure you have FormsModule imported in your module. Then... remember to use ngModel to bind the user to the form.
But, forms do not care about ngModel unless there is also a name attribute on each field:
<input class="form-control" name="fullName" [ngModel]="user.fullName">
OR
ngModelOptions in each field:
<input class="form-control" [ngModelOptions]="{standalone: true}" [ngModel]="user.fullName">
Here's a demo for you with usage of the name attribute:
Plunker