Create Edit form with data from JSON url - json

Question

so I have a pre-populated Bootstrap form with a Edit# button, I now want to edit the content. It gets data from the JSON url created from the Firebase database. It has User model.The functions are in the userprofile.component.ts . Please advise.
User Html page
<form class="needs-validation" novalidate >
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstname" placeholder="first name"
value={{useritem.firstname}} required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastname" placeholder="last name"
value={{useritem.lastname}} required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
</div>
<div class="btn-toolbar float-right">
<button class="btn btn-info mr-1" (click)="updateUser();">Update</button>
<button class="btn btn-dark " type="reset">Clear</button>
</div>
</form>
Firebase.service.ts
constructor(private httpClient: HttpClient) {}
public getuserprofile() : Observable<User[]>
{
return this.httpClient.get<User[]>(this.connectUrl);
}
updateuserprofile( user: User): Observable<User>
{
return this.httpClient.put<User>(this.connectUrl, user);
}
userprofile.component.ts
export class UserprofileComponent implements OnInit {
useritem: any = [];
constructor(private db: FirebaseService) { }
ngOnInit() {
this.getUser();
}
getUser() {
this.db.getuserprofile().subscribe(result =>
{
this.useritem = result;
console.log(result);
});
} }

Answer 1

Try to use for. ex Reactive Forms :
<form [formGroup]="form">
<div class="row">
<div class="col-md-6 mb-3">
<input formControlName="userName" placeholder="first name" >
<input formControlName="userLastName" placeholder="last name" >
</div></div>
<div class="btn-toolbar float-right">
<button class="btn btn-info mr-1" (click)="updateUser();">Update</button>
<button class="btn btn-dark " type="reset" (click)="reset()">Clear</button>
</div>
</form>
ts:
updateUser(){
this.newUser = {
userName: this.form.get('userName').value,
userLastName: this.form.get('userLastName').value
}
console.log(this.newUser) //here you can make PUT to firebase
}
reset(){
this.form.reset()
this.newUser = {}
}
https://stackblitz.com/edit/angular-1ixedr?file=src/app/app.component.ts
Hope it helps!