CODEWITHSUNDEEP
htmlangulardropdown
sckai
sckai

Reputation: 23

Angular selected value on list of dropdown

I have this dropdown list of provinces, when i have to insert it to a new Person it works correctly, but if i want to update the province of this person , it doesn't show me the old province

it is a part of information of a person so i have put only the part about province that i call from api.

if I have to update a field other than province, province, it makes me select it anyway, it does not mark me the old value, in the db it is marked, it is only a problem regarding the html writing

when i have to insert: enter image description here

when i have to update: enter image description here

<div class="form-group">
          <label for="province" class="required">Province</label>
          <select name="Province" (change)="ChangeProvince($event)" class="form-control" required>
            <option>--Select--</option>
            <option [value]="p.name" *ngFor="let p of province">
              {{ p.name }}
            </option>
          </select>
        </div>

// all province
  province: any;
  //selected velue for province
  selectedValueP:'
ngOnInit(): void {
// get province
    this.provinceAndRegions.getProvincesAndRegions().subscribe((province) => {
      this.province = province;
    });
}
  ChangeProvince(e:any){
    console.log(e.target.value)
    this.selectedValueP = e.target.value;
}

Upvotes: 0

Views: 74

Answers (1)

MoxxiManagarm
MoxxiManagarm

Reputation: 9124

Remove the event and use 2way ngModel binding to store the value.

<div class="form-group">
          <label for="province" class="required">Province</label>
          <select name="Province" [(ngModel)]="selectedValueP" class="form-control" required>
            <option>--Select--</option>
            <option [value]="p.name" *ngFor="let p of province">
              {{ p.name }}
            </option>
          </select>
        </div>

For existing persons, you then assign the person's province to selectedValueP.

this.selectedValueP = person.provinceName

Upvotes: 1

Related Questions