How to set fields values in Angular forms

Question

I'm trying to set view field values when "user_details" object is populated in the .ts on the ngOnInit() execution.

This is the .ts where I'm filling the user_details object.

export class ProfileComponent implements OnInit {

  user_details = {
    name: '',
    first_surname: '',
    second_surname: '',
    age: '',
    birdth_date: '',
    location: '',
    phone: '',
    image: ''
  };
  constructor(private authService: AuthService, private router: Router) { }

  ngOnInit(): void {
    this.authService.getProfile()
    .subscribe(
      res => {
        this.user_details = res;
        console.log(this.user_details)
      },
      err => console.log(err)
    );
  }

As you see, the object is getting correct data.

This is the form where I need to fill the fields.

<div class="container p-4">
    <form (submit)="updateProfile()">
    <div class="row d-flex justify-content-center text-white">
        <div class="col-md-6">
                <div class="form-group">
                  <label for="name">Name</label>
                  <input type="text" [(ngModel)]="user_details.name" value={{user_details.name}} name="name" class="form-control" id="name" placeholder="Name">
                </div>
                <div class="form-group">
                  <label for="first_surname">First surname</label>
                  <input type="text" [(ngModel)]="user_details.first_surname" name="first_surname" value={{user_details.first_surname}} class="form-control" id="first_surname" placeholder="First surname">
                </div>
...

How can I set the values of the view fields with this object data? I need to be displayed "user_details" fields in the view, and my view is empty.

Thanks for reading!

just want to make if i understood your question, so you want to display the vaues when user types it ? Am i right ? — Siju Samson
– Siju Samson, Commented Jul 2, 2020 at 10:29
Not exactly, when getProfile() function is executed it returns some user values. Those values I need to be displayed in the different fields of the form. @SijuSamson — arevilla009
– arevilla009, Commented Jul 2, 2020 at 10:31
what exactly is the problem? I've reproduced your example here which seems to be working fine. — ViqMontana
– ViqMontana, Commented Jul 2, 2020 at 10:33
So you get a response when you are calling getProfile(), so you want to display it ? — Siju Samson
– Siju Samson, Commented Jul 2, 2020 at 10:33
Whe I call getProfile() I get an user object "user_details = {'name': ........} and this object I need to be setted in the different form fields defined in the view. @SijuSamson — arevilla009
– arevilla009, Commented Jul 2, 2020 at 10:35

Siju Samson · Accepted Answer · 2020-07-02 11:01:48Z

1

The Best way is to use Reactive Forms, as it provides lot of features, which you may need in forms. I have tried to recreate your code in code sandbox, please have a look at it, as I was able to solve it,

<div class="form-group">
<label for="first_surname">Name</label>
<input
  type="text"
  [(ngModel)]="user_details.name.first"
  name="first_surname"
  value="user_details.name.first"
  class="form-control"
  id="name"
  placeholder="Name"
/>

answered Jul 2, 2020 at 11:01

Siju Samson

5372 gold badges7 silver badges16 bronze badges

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

2 Comments

arevilla009 Over a year ago

The problem was here: this.user_details = res['user_details'];, in a simple dictionary equality, your code helped me to solved the problem! Thanks! @Siju Samson

Siju Samson Over a year ago

@adriano009 If it helped you, please give an upvote, so that other users can see it, if they also encounter the same problem.

Diogo Brito · Accepted Answer · 2020-07-02 10:47:24Z

0

I think your problem might be in using ngModel and Value.

Refer to this response in another question for more clarification.

answered Jul 2, 2020 at 10:47

Diogo Brito

1575 bronze badges

Comments

Matan Shushan · Accepted Answer · 2020-07-02 10:47:34Z

0

Short answer

Remove the value property from the input tag.

Right answer Use angular forms read here. After setting the from Group for your form set value for the right controller

answered Jul 2, 2020 at 10:47

Matan Shushan

1,2841 gold badge13 silver badges27 bronze badges

Comments

Mohamed Aljamil · Accepted Answer · 2020-07-02 11:32:33Z

the way I solved that problem was by using 1st reactiveFroms. just like other answers mentioned and here is how I did it.

there are two ways your user will have their data on the component but in most cases, it will be called from the db which means a promise or an observable.

in that case. the psuedo code will look something like this.

ngOnInit() {
 this.form = new FormGroup({
      firstName: new FormControl(null,),
      lastName: new FormControl(null,),
      mobile: new FormControl(null),
    });
    
    this.YourService.getProfileInformation().subscribe((data: UserProfile) => {
    // you might want to check if your data is right and fits the form fields
      this.form.setValue({
      firstName: data.firstName,
      lastName: data.lastName,
      mobile: data.mobile
      })
    })
}

I believe this is the cleanest way to do that.

Collectives™ on Stack Overflow

How to set fields values in Angular forms

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related