fix(input): floating label not reacting when patching the value without emitting an event (#9260)

Fixes the input's floating label state not being updated when the consumer patches the form control's value without emitting an event.

Fixes #8982.
This commit is contained in:
Kristiyan Kostadinov
2018-01-23 17:02:49 +01:00
committed by Jeremy Elbourn
parent 48bf0edcd5
commit ec6678df21
2 changed files with 24 additions and 5 deletions
+19 -1
View File
@@ -1130,6 +1130,21 @@ describe('MatInput with forms', () => {
expect(el).not.toBeNull();
expect(el.classList.contains('mat-form-field-empty')).toBe(false);
}));
it('should update when the form field value is patched without emitting', fakeAsync(() => {
const fixture = TestBed.createComponent(MatInputWithFormControl);
fixture.detectChanges();
const el = fixture.debugElement.query(By.css('label')).nativeElement;
expect(el.classList).toContain('mat-form-field-empty');
fixture.componentInstance.formControl.patchValue('value', {emitEvent: false});
fixture.detectChanges();
expect(el.classList).not.toContain('mat-form-field-empty');
}));
});
@Component({
@@ -1183,7 +1198,10 @@ class MatInputPlaceholderElementTestComponent {
}
@Component({
template: `<mat-form-field><input matInput [formControl]="formControl"></mat-form-field>`
template: `
<mat-form-field>
<input matInput placeholder="Hello" [formControl]="formControl">
</mat-form-field>`
})
class MatInputWithFormControl {
formControl = new FormControl();
+5 -4
View File
@@ -229,11 +229,12 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
// error triggers that we can't subscribe to (e.g. parent form submissions). This means
// that whatever logic is in here has to be super lean or we risk destroying the performance.
this.updateErrorState();
} else {
// When the input isn't used together with `@angular/forms`, we need to check manually for
// changes to the native `value` property in order to update the floating label.
this._dirtyCheckNativeValue();
}
// We need to dirty-check the native element's value, because there are some cases where
// we won't be notified when it changes (e.g. the consumer isn't using forms or they're
// updating the value using `emitEvent: false`).
this._dirtyCheckNativeValue();
}
focus() { this._elementRef.nativeElement.focus(); }