Edit dependent select

Question

I want to make edit form with dependent select (like: country, state, city). Edit work only when i chose again first option (car brand) because I use event (change) with $event. How can I make selected default value in a second select field (car model)? Without clicking on the first select for event the second select is blank.

My code: editcar.component.html

<form #editcarPost="ngForm" (ngSubmit)="updateCar()" [formGroup]="editcarForm">
  <div class="form-group">
    <label for="carbrand_name">Car Brand</label>
    <select class="form-control" id="carbrand_name" formControlName="id_carbrand" (change)="getCarmodel($event)">
   <option *ngFor='let carbrand of carbrands' [value]="carbrand.id_carbrand" >{{carbrand.carbrand_name}}</option>
    </select>
  </div>
  <div class="form-group">
    <label for="carmodel_name">Car Model</label>
    <select class="form-control" id="carmodel_name" formControlName="id_carmodel">
   <option *ngFor='let obj of carmodelArr' [value]="obj.id_carmodel">{{obj.carmodel_name}}</option>
    </select>
  </div>

editcar.component.ts

 ngOnInit() {
    console.log(this.router.snapshot.params.id);
    this.dataService.getCars().subscribe(data => this.cars = data);
    this.dataService.getCarbrands().subscribe(data => this.carbrands = data);
    this.dataService.getEditCar(this.router.snapshot.params.id).subscribe((result)=>{
    this.editcarForm = new FormGroup({
      id_carbrand: new FormControl(result[0].id_carbrand, Validators.required),
      id_carmodel: new FormControl(result[0].id_carmodel, Validators.required),
      production_year: new FormControl(result[0].production_year),
      plate_number: new FormControl(result[0].plate_number),
      vin: new FormControl(result[0].vin),
      colour: new FormControl(result[0].colour),
      description: new FormControl(result[0].description),
    })
  
  })
  }

  getCarmodel(event)
  {
    var obj = {
      id_carbrand: event.target.value,
    }
    this.dataService.getCarbrandByID(obj).subscribe(res=>{
        this.carmodelArr = res;
    })
  }

How to make default value for event.target.value or sth without clicking the first select filed?

I'm not sure what the problem is. You want a default value for your second select of car model without having to change the first dropdown, which has a dropdown of car brands? The line id_carmodel: new FormControl(result[0].id_carmodel, Validators.required) in your FormGroup, already sets a default value for your second dropdown. I'm not sure what the problem is. — Ruben Szekér
Yes, but when I refresh the page the select with car model is blank. Only when i choose again the car brand by clicking it begins work correctly — Lukasz_7

Lukasz_7 Lukasz_7 · Accepted Answer · 2020-12-01T08:50:42

Ok, I resolved this by add second function getCarmodelstart with id parameter instead event. And in OnInit I added "this.getCarmodelstart(result[0].id_carbrand);"

Edit dependent select

1 Answers