When utilizing Angular7 CLI, I am attempting to retrieve the value of mat-select which is associated with a FormControl within a FormGroup. Upon retrieving the value, it displays as [object object]
In one solution, I have added [(value)]="selectedOption". However, this does not align with the official documentation
Below is the component code:
purposeControl = new FormControl('', [Validators.required]);
purposeList: Purpose[] = [
{id: '0', value: 'Self Care'},
{id: '1', value: 'Caring for someone'},
];
validateVitalsFormGroup = new FormGroup({
purposeControl: this.purposeControl,
});
Implemented a 'submit' button to submit data
Returning back to the component :
onFormSubmit(): void {
console.log('Purpose:' +
this.validateVitalsFormGroup.get('purposeControl').value);
}
Here is the HTML code:
<mat-form-field>
<mat-select [(value)]="selectedOption" placeholder="Purpose" [formControl]="purposeControl" required >
<mat-option>--</mat-option>
<mat-option *ngFor="let purpose of purposeList" [value]="purpose">{{purpose.value}} </mat-option>
</mat-select>
<mat-error *ngIf="purposeControl.hasError('required')"> Please choose a Purpose</mat-error>
<mat-hint>{{purposeControl.value?.value}}</mat-hint>
</mat-form-field>
The expected value should be either id 0 or 1 based on selection in the HTML.