Reputation: 2568
So I have an odd behavior that I want to implement on my dropdown. I have two scenarios and both will have different default selected values.
Scenario 1: If user role is admin, then dropdown will not be disabled and 'Select Location' placeholder will show up as selected default.
Scenario 2: if user role is clerk, then dropdown will be disabled and the selected value will be a specific location from the dropdown selection.
While I got the role permission and disabled/enabled thing setup, I'm not sure how to dynamically change the selected value of the dropdown. This is inside reactive forms form group, so not sure I can use ngModel or can I?
Here's my dropdown:
<select [ngModel]="null" formControlName="location" required >
<option value="null" disabled>{{'SelectLocation' | translate}}</option>
<option selected *ngFor="let store of location" [ngValue]="store._storeKey">{{ store._storeName }}</option>
</select>
Here's the check I have that disables/enables the dropdown:
checkUserPermissions() {
if (this.userPermissions._userPrivilegeKey === 100) {
//TODO: Default to store2 of list for example
this.transactionForm.controls['location'].value = stores._store; // This is right?
this.transactionForm.controls['location'].disable();
} else if (this.userPermissions._userPrivilegeKey === 200) {
//TODO: Default to select location placeholder (currently working)
this.transactionForm.controls['location'].enable();
}
}
Upvotes: 1
Views: 877
Reputation: 2486
You should use the patchValue function instead of directly assigning the value when dealing with forms
this.transactionForm.controls['location'].patchValue(stores._store)
Upvotes: 1