Issue with Patching Form Control with Object Instead of Value in Angular Reactive Forms

I’m using mat-select in my Angular form to let users select multiple countries as objects with id and name properties. However, I need to patch the form control with the full country objects instead of just their IDs, but it doesn’t behave as expected. Here’s the relevant code snippet!!!

I need to patch the form control with full country objects instead of Id, but currently, it's only working with country IDs

<form [formGroup]="countryForm" (ngSubmit)="onSubmit()">
<mat-form-field appearance="outline">
<mat-label>Countries</mat-label>
<mat-select formControlName="countryControl" multiple >
<mat-option *ngFor="let country of countries" [value]="country">
{{ country.name }}
</mat-option>
</mat-select>

</mat-form-field>

</form>
<div>
<button mat-raised-button color="accent" type="button" (click)="patchFormWithCountry()">Patch Form</button>
</div>


here is my ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

/** @title Form field appearance variants */
@Component({
selector: 'form-field-appearance-example',
templateUrl: 'form-field-appearance-example.html',
})
export class FormFieldAppearanceExample {
countryForm: FormGroup;
countries: any[] = [
{ id: 1, name: 'United States' },
{ id: 2, name: 'Canada' },
{ id: 3, name: 'United Kingdom' },
{ id: 4, name: 'Australia' },
{ id: 5, name: 'Germany' },
{ id: 6, name: 'France' },
{ id: 7, name: 'Italy' },
{ id: 8, name: 'Spain' },
{ id: 9, name: 'India' },
{ id: 10, name: 'China' },
{ id: 11, name: 'Japan' },
{ id: 12, name: 'Brazil' },
{ id: 13, name: 'South Africa' },
{ id: 14, name: 'Mexico' },
{ id: 15, name: 'Russia' },
];

constructor(private fb: FormBuilder) {}

ngOnInit() {
this.countryForm = this.fb.group({
countryControl: [''],
});
}

patchFormWithCountry() {
const selectedCountries = [
{ id: 1, name: 'United States' },
{ id: 2, name: 'Canada' },
{ id: 3, name: 'United Kingdom' },
{ id: 4, name: 'Australia' },
];

this.countryForm.patchValue({
countryControl: selectedCountries,
});
}

onSubmit() {
console.log('Form submitted:', this.countryForm.value);
}
}

Continue reading...