I am attempting to link the selected value in a dropdown menu to an article, with a property that matches the type of the dropdown's data source. However, despite logging my article object, the property intended to hold the selected dropdown value appears empty.
Below is a snippet of my code:
In typescript I have :
article: Article;
mainGroups: Group[];
subGroups: Group[];
During initialization, I fill mainGroups and subGroups with data as follows:
ngOnInit() {
this._groupService.getAll().subscribe(groups => this.mainGroups = groups);
this._groupService.getAllSubGroups().subscribe(subgroups => this.subGroups = subgroups);
}
Then, in the html file, I iterate over values from my mainGroups and subGroups arrays like so:
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Main group:</label>
<div class="col-xs-9">
<select class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="articleGroups" required [(ngModel)]="article.mainGroup">
<option disabled [ngValue]="null">-/-</option>
<option [ngValue]="group" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
</div>
</div>
<!--Sub group-->
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Sub group:</label>
<div class="col-xs-9">
<select class="form-control dash-form-control select2" style="width: 100%;" name="subGroup" required [(ngModel)]="article.subGroup">
<option disabled [ngValue]="null">-/-</option>
<option [ngValue]="subgroup" *ngFor="let subgroup of subGroups">{{subgroup.title}}</option>
</select>
</div>
</div>
In the above code, I specify [(ngModel)]="article.mainGroup" on the first dropdown along with
[ngValue]="group" *ngFor="let group of mainGroups"Therefore, does the [ngValue]="group" retrieve the value from the *ngFor loop and assign it to article.mainGroup?
However, when I log article to the console, the article.mainGroup property seems to be missing entirely, even though it is defined in the article.ts model. Does this mean that the article.mainGroup property is empty (as it is not visible in console.log(article))?