Angular selected value on list of dropdown

Question

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:

when i have to update:

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

You should definitely try to rephrase your question. Maybe you can also provide a screenshot what does not work as expected (if it is a UI issue). — Fabian Strathaus
– Fabian Strathaus, Commented Nov 4, 2022 at 10:15
Your question is really unclear, mainly due to bad english. Kindly fix your writing. Do you want a multiselect option? Or do you want to use the value, that got disabled by choosing a new value? — MoxxiManagarm
– MoxxiManagarm, Commented Nov 4, 2022 at 10:17
please, use two binding way (aka [(ngModel)]), see the docs. BTW, apologies if you consider it impolite, but has you make a tour of heroes? — Eliseo
– Eliseo, Commented Nov 4, 2022 at 11:06

MoxxiManagarm · Accepted Answer · 2022-11-04 11:05:45Z

1

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

answered Nov 4, 2022 at 11:05

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

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

Collectives™ on Stack Overflow

Angular selected value on list of dropdown

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related