mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
Jeremy Elbourn
parent
48bf0edcd5
commit
ec6678df21
@@ -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();
|
||||
|
||||
@@ -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(); }
|
||||
|
||||
Reference in New Issue
Block a user