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, Jul 02 '20 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, Jul 02 '20 at 10:31
what exactly is the problem? I've reproduced your example [here](https://stackblitz.com/edit/angular-reactive-forms-fayys8?file=app/app.component.ts) which seems to be working fine. — ViqMontana, Jul 02 '20 at 10:33
So you get a response when you are calling getProfile(), so you want to display it ? — Siju Samson, Jul 02 '20 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, Jul 02 '20 at 10:35
also check console.log(res), is res missing values or problem in user_detial — Usman Ali, Jul 02 '20 at 10:49

score 1 · Accepted Answer · answered Jul 02 '20 at 11:01

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 02 '20 at 11:01

Siju Samson

437
2
6
16

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 – arevilla009 Jul 02 '20 at 11:28
@adriano009 If it helped you, please give an upvote, so that other users can see it, if they also encounter the same problem. – Siju Samson Jul 02 '20 at 11:33

score 0 · Answer 2 · answered Jul 02 '20 at 10:47

0

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

Refer to this response in another question for more clarification.

answered Jul 02 '20 at 10:47

Diogo Brito

147
5

score 0 · Answer 3 · answered Jul 02 '20 at 10:47

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 02 '20 at 10:47

Matan Shushan

1,204
1
10
25

score 0 · Answer 4 · answered Jul 02 '20 at 11:32

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.

How to set fields values in Angular forms

4 Answers4