如何在 angular 的表单输入字段中绑定来自 api 响应的数据

Question

I want to bind my data which i am getting from api to input field of the reactive form. Here is my ts code

ngOnInit() {
this.profileForm = this.formBuilder.group({
  name: ['']
});

this.route.paramMap.subscribe(routeParam => {
  const id = parseInt(routeParam.get('id'));
  console.log(id)
  this.zoneId = id
  this.getZoneData();
})
 }        
  getZoneData() {
    this.zone_service.getZoneById(this.zoneId).subscribe((res) => {
    console.log(res)
    this.zoneName = res.name;
  console.log(this.zoneName)
})
}

Below is my html code. I want to bind zoneName to the form input below

        <form [formGroup]="profileForm" (ngSubmit)="save(profileForm.value)">
         <div class="form-group row">
          <label for="zname" class="col-sm-2 col-form-label">Zone Name</label>
         <div class="col-sm-10 txt-box">
          <input type="text" name="zname" formControlName="name" id="zoneName"                        
        class="form-control" placeholder="Enter Zone name" >
                    </div> </div>
                <div class="form-group row">
                    <div class=" col-md-10">
                        <button type="submit" class="a-btns btn btn-success">Save</button>
                    </div>
                </div>
            </form>

Answer 1

Use patchValue() to set values of a reactive form.

Try like this:

getZoneData() {
  this.zone_service.getZoneById(this.zoneId).subscribe((res) => {
    this.profileForm.patchValue(res); // set value of all properties        
    this.profileForm.controls.name.patchValue(res.name); // set value of single property
})

Answer 2

getZoneData() {
  this.zone_service.getZoneById(this.zoneId).subscribe((res) => {
  console.log(res)
  this.zoneName = res.name;
  this.profileForm.controls.name.setValue(res.name)
  console.log(this.zoneName)
})

Answer 3

You could make the form right after getting the data and initialize the form's properties with the res values, something like this:

import { Component } from "@angular/core";
import { FormGroup, FormBuilder } from "@angular/forms";
import { ActivatedRoute } from "@angular/router";
import { Observable } from "rxjs";
import { switchMap, tap, map } from "rxjs/operators";
import { ZoneService } from "./zone.service";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  profileForm$: Observable<FormGroup>;
  zoneId;
  zoneName;

  constructor(
    private route: ActivatedRoute,
    private formBuilder: FormBuilder,
    private zone_service: ZoneService
  ) {}

  ngOnInit() {
    this.profileForm$ = this.route.paramMap.pipe(
      switchMap(routeParam => {
        const id = +routeParam.get("id");
        this.zoneId = id;
        return this.getZoneData();
      }),
      map(name =>
        this.formBuilder.group({
          name: [name]
        })
      )
    );
  }

  getZoneData() {
    return this.zone_service.getZoneById(this.zoneId).pipe(
      tap(res => (this.zoneName = res.name)),
      map(res => res.name)
    );
  }
}

You would then use an async pipe in the template to unwrap the form like this:

<div *ngIf="profileForm$ | async as profileForm">
  <form 
    [formGroup]="profileForm" 
    (ngSubmit)="save(profileForm.value)">
    <div class="form-group row">
      <label for="zname" class="col-sm-2 col-form-label">Zone Name</label>
      <div class="col-sm-10 txt-box">
        <input 
          type="text" 
          name="zname" 
          formControlName="name" 
          id="zoneName" 
          class="form-control" 
          placeholder="Enter Zone name">
      </div>
    </div>
    <div class="form-group row">
      <div class=" col-md-10">
        <button type="submit" class="a-btns btn btn-success">Save</button>
      </div>
    </div>
  </form>
</div>

---

Here's a Working Demo for your ref.