如何在Angular 6和.NET Core中按ID设置表单中的值？

Question

I want to edit a specific car and I have made a method for it.

This is my code in the CarController.cs

[Route("GetCarById")]
[HttpGet]
public async Task<Car> Get(long carId)
{
return await _context.Cars.FirstAsync(e => e.CarId == carId);
}

Then I call this method in my carServices.js

getCarById(carId: number): Observable<CarVM> {
    return this.http.get<CarVM>(this.baseUrl + "/getCarById?carId=" + carId)
  }

And finally I call this method in my car component

 EditCar(CarId: number) {
    this.carservice.getCarById(CarId).subscribe();
  }

Then I bind this method on a button like this:

<button type="button" class="btn btn-primary mr-1" (click)="EditCar(car.carId)">Edit</button>

I have debug my application and I get the right values when I click on the edit button. Now I want to bind these values in my text fields. I use Formbuilder and in the past I used ng-model . This is the whole code for the forms:

 <form [formGroup]="FormCar" (ngSubmit)="AddCar(FormCar.value)">
    <div class="row">
      <div class="form-group col-sm-3">
        <label>Brand</label>
        <input type="text" class="form-control" formControlName="Brand" id="brand" placeholder="Enter brand">
      </div>
    </div>
    <div class="row">
      <div class="form-group col-sm-3">
        <label>Model</label>
        <input type="text" class="form-control" formControlName="Model" id="model" placeholder="Enter model">
      </div>
    </div>
    <div class="row">
      <div class="form-group col-sm-3">
        <label>Color</label>
        <input type="text" class="form-control" formControlName="Color" id="color" placeholder="Enter color">
      </div>
    </div>
    <div class="row">
      <div class="form-group col-sm-3">
        <label>Speed</label>
        <input type="number" class="form-control" formControlName="TopSpeed" id="topSpeed" placeholder="Enter speed">
      </div>
    </div>
    <div class="row">
      <div class="form-group col-md-2">
        <button type="submit" class="btn btn-danger mr-1">Save changes</button>
      </div>
      <div class="form-group col-md-2">
        <button type="reset" class="btn btn-danger mr-1" (click)="reset()">New record</button>
      </div>
    </div>
  </form>

I have used to set the values for each field like this but it didn't work for me:

this.Form.controls['Brand'].setValue(Response.Brand); 

Can someone explain me how to set the values from the web api?

UPDATE

This is my code for the Formbuilder

 buildFormCar() {
    this.FormCar = this.formBuilder.group({
      CarId: ['', Validators.required],
      Brand: ['', Validators.required],
      Model: ['', Validators.required],
      Color: ['', Validators.required],
      TopSpeed: ['', Validators.required],
    });
  }

Answer 1

Use like this:

EditCar(CarId: number) {
    this.carservice.getCarById(CarId).subscribe((resp: any) => {
        this.FormCar.patchValue({
          CarId: resp.carId,
          Brand: resp.brand,
          Model: resp.model
        })
    });
  }

Answer 2

Try using patchValue like this:

  EditCar(CarId: number) {
    this.carservice.getCarById(CarId).subscribe((resp: any) => {
        this.FormCar.patchValue(res)
    });
  }

You can also use setValue instead of patchValue id all form controls are present in res.

Since in your backend response, the first letter of properties is in lowercase, its better if you build the formBuilder in the same way,

buildFormCar() {
    this.FormCar = this.formBuilder.group({
      carId: ['', Validators.required],
      brand: ['', Validators.required],
      model: ['', Validators.required],
      color: ['', Validators.required],
      topSpeed: ['', Validators.required],
    });
  }

and assign in the same way in template:

<input type="text" class="form-control" formControlName="brand" id="brand" placeholder="Enter brand">

This will shorten your code and you won't have to reasign all the propertied during edit.