The issue I'm facing is that the select box DOM value does not update after the value has been changed in the component.ts file.
Could you please review the code provided below:
<form class="form-horizontal aformgroups" [formGroup]="PurchaseForm" autocomplete="off">
<select class="selectpicker form-control" name="FolioNumberDDl" formControlName="FolioNumberDDl">
<option *ngFor="let i of FolioNumberData" [ngValue]="i">{{i}}</option>
</select>
<input type="radio" (change)="changeSelectValue()" />Change Value
</form>
export class AppComponent {
name = 'Angular';
PurchaseForm;
FolioNumberData: any = [];
ngOnInit() {
this.FolioNumberData = ["Select", "1234", "3256", "5643", "5555"]
this.PurchaseForm = new FormGroup({
FolioNumberDDl: new FormControl({ value: '1234'})
});
this.PurchaseForm.controls.FolioNumberDDl.setValue("1234")
}
changeSelectValue(){
this.PurchaseForm.controls["FolioNumberDDl"].setValue("1234");
console.log(this.PurchaseForm.controls.FolioNumberDDl.value, "this.PurchaseForm.controls.FolioNumberDDl.value");
}
Stackblitz: https://stackblitz.com/edit/angular-d3gpku
I've spent quite a bit of time trying to solve this problem. If anyone can provide assistance, it would be greatly appreciated.