Создать форму редактирования с данными из JSON url

Question

, поэтому у меня есть предварительно заполненная форма Bootstrap с кнопкой Edit@, теперь я хочу редактировать содержимое. Он получает данные из JSON url, созданного из базы данных Firebase. Он имеет модель пользователя. Функции в userprofile.component .ts. Пожалуйста, сообщите.

Пользователь Html страница

                <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

Попробуйте использовать для. 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

Надеюсь, это поможет !