I am currently in the process of making updates to a multi-select from the component.
Instead of using an array property as the model for the select, I opted for an object property. When an option is selected, the object property is updated accordingly.
Below is the code snippet for the select in the template:
<div class="form-group">
<select multiple="" class="form-control" [(ngModel)]="recipe.mainIngredients" name="mainIngredients">
<option *ngFor="let ingredient of mainIngredients" value="{{ ingredient._id }}">{{ ingredient.title }}</option>
</select>
</div>
And here is the corresponding code in the component:
autoSelectMainIngredients(ingredient: Ingredient) {
// Retrieve the ingredient id to be saved in the object property (which acts as the ngmodel)
var mainIngredientId = this.mainIngredients.findObjectPropertyByAnotherProperty("title", ingredient.title, "_id");
if (mainIngredientId){
// Issue with select not updating
this.recipe.mainIngredients.push(mainIngredientId);
}
}
The multi-select does not get updated with the id when there are changes made to the model. Any suggestions on how I could achieve that successfully? Thank you.
UPDATE: If I manually update the ngmodel in ngOnInit:
this.recipe.mainIngredients.push("5a9e9e5a84d81edd7cb98e13");
Where "5a9e9e5a84d81edd7cb98e13" represents a valid value, everything works smoothly and the select displays the selection.