Angular 18, mat-select not working when used in custom contol

I tried to create custom control which contains the <mat-select> control. It is not working when I tied to use it in the Form control. I have taken the reference from the official Material website.

https://v18.material.angular.io/guide/creating-a-custom-form-field-control

https://stackblitz.com/run?file=src/example/form-field-custom-control-example.ts

Used the same code and created a working example in Angular 18. In the example there are two custom controls added on the page 'Phone number' and 'Dropdown'.

<div [formGroup]="form">
<mat-form-field>
<mat-label>Phone number</mat-label>
<example-tel-input formControlName="Phone1" required></example-tel-input>
<mat-icon matSuffix>phone</mat-icon>
<mat-hint>Include area code</mat-hint>
</mat-form-field>
<span>&nbsp;</span>
<mat-form-field>
<mat-label>Phone number</mat-label>
<app-my-phone formControlName="Phone2"></app-my-phone>
<mat-icon matSuffix>phone</mat-icon>
<mat-hint>Add number</mat-hint>
</mat-form-field>
<span>&nbsp;</span>
<mat-form-field>
<mat-label>My DD</mat-label>
<app-my-dd formControlName="Gender"></app-my-dd>
<mat-hint>Select dropdown</mat-hint>
</mat-form-field>
<br/>
<br/>
<p>Entered value: {{form.valueChanges | async | json}}</p>
</div>


The first one for 'Phone number' ( formControlName="Phone1" ) is working fine and giving me the updated values. But the 'Dropdown' ( formControlName="Gender" ) control is not giving me the updated values.

Before adding inputs

After adding inputs

I tried to use the mat-select in the custom control. The cutom control contains the HTML code

<div
role="group"
[formGroup]="parts"
[attr.aria-labelledby]="_formField?.getLabelId()"
(focusin)="onFocusIn()"
(focusout)="onFocusOut($event)">

<mat-select
formControlName="partsSelectedValue">
<mat-option value="Male">Male</mat-option>
<mat-option value="Female">Female</mat-option>
</mat-select>

</div>


The complete code is available on git hub. https://github.com/gurpreet42/AngularMaterialCustomContol Please go through the code and suggest why custom control is not working when I used the Material Select control.

Continue reading...