Angular2 Edit profile: Display retrieved data in HTML input tag

Question

I have an edit profile page. So when the user clicks on the edit profile page the users details should be displayed in the input tag fields in the HTML. But I am unable to display the details I am retrieving.

edit-profile.component.html

 <form novalidate (ngSubmit)="onFormSubmit(signupForm)" #signupForm="ngForm">
      <div class="form-inputs clearfix">
        <div class="row">
            <div class="col-md-6">
                <p>
                    <label class="required">First Name<span>*</span></label>
                    <input 
                      type="text" 

                      [value]="accountDetails.firstName"
                      name="firstName" 
                      [(ngModel)] = "user.firstName" 
                      #firstName = "ngModel"
                     required><p>{{accountDetails.firstName}} </p>
                      <span *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)" class="input-error">
                          <span *ngIf = "firstName.errors?.required">
                              First Name field can't be blank
                          </span>
                        </span>
                  </p></form>

edit-profile.component.ts

    import { Component, OnInit } from '@angular/core';
import { ApiServiceProvider } from '../services/api.service';


@Component({
  selector: 'app-edit-profile',
  templateUrl: './edit-profile.component.html',
  styleUrls: ['./edit-profile.component.css']
})
export class EditProfileComponent implements OnInit {
  public user: any = {};
  public accountDetails: any = {}

  constructor(
    private api: ApiServiceProvider
  ) { }

  ngOnInit() {

    let profile = JSON.parse(localStorage.getItem("profile"));
    this.accountDetails = profile.user;
    console.log(this.accountDetails);
  }

  public onFormSubmit({ value, valid }: { value: any, valid: boolean }) {
    this.user = value;
    this.api.put("/users/editprofile", value.userId, false)
      .subscribe((data) => {

        console.log(data)
        localStorage.setItem("profile", JSON.stringify(data));

        location.href = "/profile"

      }, (err) => {
        alert("Registartion failed " + err);
      })

  }

}

Harry · Accepted Answer · 2018-01-02 10:44:34Z

1

you only populate your accountDetails variable but you try to bind your user variable.

so you have:

this.accountDetails = profile.user;

but you bind your input to the user variable:

 <input type="text" [(ngModel)]="user.firstName" #firstName="ngModel" required>

Either populate your user variable:

this.user = profile.user;

or bind to your account details variable:

<input type="text" [(ngModel)]="accountDetails.firstName" #firstName="ngModel" required>

Also you need to close your div clearfix, div row and div column correctly before closing the form tag. </div></div></div></form>

answered Jan 2, 2018 at 10:44

Harry

4,0602 gold badges16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

j-s Over a year ago

can I use value={{user.firstName}} inside the input tag to display the first name of the retrieved used

Harry Over a year ago

[(ngModel)]="user.firstName" will set the value of the input so you do not need to write value=.... read here: angular.io/api/forms/NgModel#how-to-use

Collectives™ on Stack Overflow

Angular2 Edit profile: Display retrieved data in HTML input tag

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related