diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts index 5e289b2fe350..adcdf636bcde 100644 --- a/src/material/select/select.spec.ts +++ b/src/material/select/select.spec.ts @@ -2789,6 +2789,16 @@ describe('MatSelect', () => { expect(trigger.textContent).not.toContain('Pizza'); })); + + it('should sync up the form control value with the component value', fakeAsync(() => { + const fixture = TestBed.createComponent(BasicSelectOnPushPreselected); + fixture.detectChanges(); + flush(); + + expect(fixture.componentInstance.control.value).toBe('pizza-1'); + expect(fixture.componentInstance.select.value).toBe('pizza-1'); + })); + }); describe('with custom trigger', () => { @@ -4723,6 +4733,7 @@ class BasicSelectOnPush { ` }) class BasicSelectOnPushPreselected { + @ViewChild(MatSelect) select: MatSelect; foods: any[] = [ { value: 'steak-0', viewValue: 'Steak' }, { value: 'pizza-1', viewValue: 'Pizza' }, diff --git a/src/material/select/select.ts b/src/material/select/select.ts index f81fc4aa216d..903acea7556f 100644 --- a/src/material/select/select.ts +++ b/src/material/select/select.ts @@ -866,7 +866,11 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, // Defer setting the value in order to avoid the "Expression // has changed after it was checked" errors from Angular. Promise.resolve().then(() => { - this._setSelectionByValue(this.ngControl ? this.ngControl.value : this._value); + if (this.ngControl) { + this._value = this.ngControl.value; + } + + this._setSelectionByValue(this._value); this.stateChanges.next(); }); }