如何在 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!

Answer 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"
/>

Answer 2

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

Refer to this response in another question for more clarification.

Answer 3

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

Answer 4

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.