The selected value in a mat-select is not sent to parent - angular-material2

Question

I created a dropdown in an angular library to be used in our applications. I used angular-material2 for the dropdown (mat-select and mat-autocomplete).
I must be doing something wrong since I don't get the value when I use the dropdown in an app. I already tried pretty much everything I found on the net, with no result.
I commented most of it and I'm trying to solve the simplest version, but even in this case I'm not getting the value. Here is what I have now:
DropdownComponent.html library:
<mat-form-field appearance="outline">
<mat-select disableOptionCentering (selectionChange)="writeValue($event)" [multiple]="multi">
<mat-option *ngFor="let item of list" [value]="item">
{{ item }}
</mat-option>
</mat-select>
</mat-form-field>
DropdownComponent.ts library:
import {Component, OnInit, ViewEncapsulation, Input, forwardRef} from '#angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl} from '#angular/forms';
import {Observable} from 'rxjs';
#Component({
selector: 'pux-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.scss'],
encapsulation: ViewEncapsulation.None,
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DropdownComponent), multi: true },
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => DropdownComponent), multi: true }
]
})
export class DropdownComponent implements OnInit, ControlValueAccessor {
#Input() list: any[] = [];
#Input() selected: any;
#Input() multi = false;
#Input() search = false;
items: any[] = [];
propagateChange = (_: any) => {};
validateFn: any = () => {};
constructor() { }
ngOnInit() {
this.items = this.list;
}
// Form
get value(): any { return this.selected; }
set value(newValue: any) {
if (newValue !== this.selected) {
this.writeValue(newValue);
this.registerOnChange(newValue);
this.selected = newValue;
}
}
registerOnChange(fn: any): void { this.propagateChange = fn; }
registerOnTouched(fn: any): void {}
setDisabledState(isDisabled: boolean): void {}
writeValue(obj: any): void {
if (obj !== null) {
this.selected = obj.value;
this.registerOnChange(this.selected);
console.log(this.selected);
}
}
validate(c: FormControl) { return this.validateFn(c); }
}
DropDownComponent.html application:
<div>
<form [formGroup]="selectForm" (ngSubmit)="saveSelect(selectForm)" #form1="ngForm">
<div>
<pux-dropdown formControlName="selectValue" [list]="list1"> </pux-dropdown>
</div> <br>
<button mat-flat-button="primary" type="submit" class="btn btn-primary">Save</button>
</form> <br>
<div>
Saved Value: {{selectValue | json}}
</div>
</div>
DropdownComponent.ts application:
import {Component, OnInit} from '#angular/core';
import {FormGroup, FormBuilder} from '#angular/forms';
const states = [
'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',
'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',
'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
#Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {
list1;
multi: boolean;
selected: any;
search: boolean;
// Form
selectForm: FormGroup;
selectValue: string;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.list1 = states;
// Form
this.selectForm = this.fb.group({
selectValue: this.selected
});
}
saveSelect(formValues) {
console.log(formValues.value.selectValue);
this.selectValue = formValues.value.selectValue;
}
}
The console.log in writeValue in the library gives me the value I select in the dropdown, but the console.log in saveSelect shows me null. So the value isn't sent to the parent. Any idea what I'm doing wrong? Thank you in advance.

Answer 1

Your writeValue implementation needs to call the change function, but instead it is calling the registerOnChange function which is there for the form control to register its change function. Try something like this:
propagateChange: (value: any) => void = () => {};
registerOnChange(fn: (value: any) => void) { this.propagateChange = fn; }
writeValue(obj: any): void {
if (obj !== null && obj !== this.selected) {
this.selected = obj.value;
this.propagateChange(this.selected);
}
}