Как установить значения в формах по Id в Angular 6 и ядре .NET? - PullRequest
Новая
       22

Как установить значения в формах по Id в Angular 6 и ядре .NET?

0 голосов
/ 26 июня 2019

Я хочу отредактировать конкретную машину, и я разработал метод для нее.

Это мой код в CarController.cs 

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

Затем я вызываю этот метод в моем carServices.js 

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

И, наконец, я вызываю этот метод в моем автомобильном компоненте 

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

Затем я связываю этот метод с такой кнопкой: 

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

Я отладил свое приложение и получил правильные значения, когда нажимал кнопку редактирования.Теперь я хочу связать эти значения в моих текстовых полях.Я использую Formbuilder , а в прошлом я использовал ng-model .Вот весь код для форм: 

 <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>

Я использовал для установки значений для каждого поля, как это, но это не сработало для меня: 

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

Может кто-тообъясните мне, как установить значения из веб-API?

ОБНОВЛЕНИЕ

Это мой код для Formbuilder 

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

Ответы [ 2 ]

1 голос
/ 26 июня 2019

Используйте вот так: 

EditCar(CarId: number) {
    this.carservice.getCarById(CarId).subscribe((resp: any) => {
        this.FormCar.patchValue({
          CarId: resp.carId,
          Brand: resp.brand,
          Model: resp.model
        })
    });
  }
0 голосов
/ 26 июня 2019

Попробуйте использовать patchValue следующим образом: 

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

Вы также можете использовать setValue вместо patchValue id, все элементы управления формой присутствуют в рез.

Поскольку в вашемответ бэкэнда, первая буква свойств в нижнем регистре, лучше, если вы построите formBuilder таким же образом, 

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

и назначите таким же образом в шаблоне: 

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

Это сократит ваш код, и вам не придется заново назначать все свойства во время редактирования.

...