Issues regarding Updating values using CRUD operations in angular 17 with JSON Server

Question

When I want to update the records stored in an API, the route is passed via ActivatedRoute and is available in the file, but the records are not showing up in the HTML where I want the user to update it. I have attached both files for reference below.

update-car.component.html

<div class="container">
  <form [formGroup]="carUpdateForm" role="form" (ngSubmit)="onClickSubmit(carUpdateForm.value)" class="row g-3">
    <div class="form-group col-md-6"> 
      <label>ID</label>
      <input type="number" class="form-control" formControlName="id" placeholder="Enter ID">
    </div>

    <div class="form-group col-md-6">
      <label>Manufacturer</label>
      <input type="text" class="form-control" formControlName="manufacturer" placeholder="Enter Manufacturer Name">
    </div>

    <div class="form-group col-md-6">
      <label>Model Name</label>
      <input type="text" class="form-control" formControlName="modelName" placeholder="Enter Model Name">
    </div>

    <div class="form-group col-md-6">
      <label>Category</label>
      <input type="text" class="form-control" formControlName="category" placeholder="Enter Category">
    </div> 

    <div class="form-group col-md-6">
      <label>Drivetrain</label>
      <input type="text" class="form-control" formControlName="drivetrain" placeholder="Enter Drivetrain">
    </div>

    <div class="form-group col-md-6">
      <label>Engine</label>
      <input type="text" class="form-control" formControlName="engine" placeholder="Enter Engine">
    </div>

    <div class="form-group col-md-6">
        <label>Transmission</label>
        <input type="text" class="form-control" formControlName="transmisson" placeholder="Enter Transmission">
    </div>

    <div class="form-group col-md-6">
        <label>Max Power</label>
        <input type="number" class="form-control" formControlName="maxPower" placeholder="Enter Amont">
    </div>

    <div class="form-group col-md-6">
        <label>Max Torque</label>
        <input type="number" class="form-control" formControlName="maxTorque" placeholder="Enter Amont">
    </div>

    <div class="form-group col-md-6">
        <label>Kerb Weight</label>
        <input type="number" class="form-control" formControlName="kerbWeight" placeholder="Enter Amont">
    </div>

    <div class="col-12">
      <button [disabled]="!carUpdateForm.valid" type="submit" class="btn btn-primary">Update Car</button>
    </div>
</form>

</div>

update-car.component.ts

import { Component } from '@angular/core';
import { CarsService } from '../../../service/cars.service';
import { ToastrService } from 'ngx-toastr';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-update-car',
  templateUrl: './update-car.component.html',
  styleUrl: './update-car.component.scss'
})
export class UpdateCarComponent {
  carUpdateForm!: FormGroup;

  updateArray: any;
  routeID: any;

  constructor(private builder: FormBuilder, private carService: CarsService, private route: ActivatedRoute, private toastr: ToastrService) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe((params) => {
      this.routeID = params.get('id');
      console.log(this.routeID);
      this.carService.getSingleCarInfo(this.routeID).subscribe((res) => {
        this.updateArray = res;
        this.carUpdateForm.patchValue(this.updateFormValues());
      });
    });

    this.carUpdateForm = new FormGroup({
      id: new FormControl(this.updateArray.id),
      manufacturer: new FormControl(this.updateArray.manufacturer),
      modelName: new FormControl(this.updateArray.modelName),
      category: new FormControl(this.updateArray.category),
      drivetrain: new FormControl(this.updateArray.drivetrain),
      engine: new FormControl(this.updateArray.engine),
      transmisson: new FormControl(this.updateArray.transmisson),
      maxPower: new FormControl(this.updateArray.maxPower),
      maxTorque: new FormControl(this.updateArray.maxTorque),
      kerbWeight: new FormControl(this.updateArray.kerbWeight)
    });
  }

  onClickSubmit(formdata: any) {
    this.carService.updateCar(this.routeID, formdata).subscribe((val) => {
      this.toastr.success('Car updated successfully');
      setTimeout(() => {
        location.href = '/'
      }, 3000);
    });
  }

  updateFormValues() {
    return {
      id: this.updateArray.id,
      manufacturer: this.updateArray.manufacturer,
      modelName: this.updateArray.modelName,
      category: this.updateArray.category,
      drivetrain: this.updateArray.drivetrain,
      engine: this.updateArray.engine,
      transmisson: this.updateArray.transmisson,
      maxPower: this.updateArray.maxPower,
      maxTorque: this.updateArray.maxTorque,
      kerbWeight: this.updateArray.kerbWeight
    }
  }
}

Tried every possible way but still not fruitful. I am using angular 17 BTW with SCSS and SSR On. Please help me in solving this issue.

Tz_lyy · Accepted Answer · 2024-06-17 05:54:42Z

1

Initialize the updateArray object before creating the FormGroup object.

constructor() {
  this.updateArray = {
    id: null,
    manufacturer: '',
    modelName: '',
    category: '',
    drivetrain: '',
    engine: '',
    transmisson: '',
    maxPower: null,
    maxTorque: null,
    kerbWeight: null
  }
}

answered Jun 17, 2024 at 5:54

Tz_lyy

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Naren Murali · Accepted Answer · 2024-06-17 06:01:02Z

0

Another way it to just initialize an empty FormGroup until the actual form is initialized properly.

...
export class UpdateCarComponent {
  carUpdateForm: FormGroup = new FormGroup({});
  ...

answered Jun 17, 2024 at 6:01

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Collectives™ on Stack Overflow

Issues regarding Updating values using CRUD operations in angular 17 with JSON Server

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related