From 1926b1973d5edaf14e5bdfbe93938f13f82132a6 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 14 Jan 2022 13:28:20 +0100 Subject: [PATCH] fix(material/input): inconsistently reading name from input with ngModel (#19233) If an input has a `name` binding and an `ngModel`, the input harness won't be able to read the name from the DOM, because `ngModel` doesn't proxy it. These changes add the proxy behavior to the `MatInput` directive, similarly to what we we're doing for `required`, `placeholder`, `readonly` etc. Fixes #18624. --- src/material-experimental/mdc-input/input.ts | 1 + src/material/input/input.ts | 7 ++++ .../input/testing/shared-input.spec.ts | 38 +++++++++++++------ tools/public_api_guard/material/input.md | 3 +- 4 files changed, 36 insertions(+), 13 deletions(-) diff --git a/src/material-experimental/mdc-input/input.ts b/src/material-experimental/mdc-input/input.ts index 6bc4dc5248b7..1fe47f04914f 100644 --- a/src/material-experimental/mdc-input/input.ts +++ b/src/material-experimental/mdc-input/input.ts @@ -37,6 +37,7 @@ import {MatInput as BaseMatInput} from '@angular/material/input'; '[id]': 'id', '[disabled]': 'disabled', '[required]': 'required', + '[attr.name]': 'name', '[attr.placeholder]': 'placeholder', '[attr.readonly]': 'readonly && !_isNativeSelect || null', // Only mark the input as invalid for assistive technology if it has a value since the diff --git a/src/material/input/input.ts b/src/material/input/input.ts index 7c4abffd45a1..cf67fd0bd6ff 100644 --- a/src/material/input/input.ts +++ b/src/material/input/input.ts @@ -78,6 +78,7 @@ const _MatInputBase = mixinErrorState( '[attr.data-placeholder]': 'placeholder', '[disabled]': 'disabled', '[required]': 'required', + '[attr.name]': 'name || null', '[attr.readonly]': 'readonly && !_isNativeSelect || null', '[class.mat-native-select-inline]': '_isInlineSelect()', // Only mark the input as invalid for assistive technology if it has a value since the @@ -183,6 +184,12 @@ export class MatInput */ @Input() placeholder: string; + /** + * Name of the input. + * @docs-private + */ + @Input() name: string; + /** * Implemented as part of MatFormFieldControl. * @docs-private diff --git a/src/material/input/testing/shared-input.spec.ts b/src/material/input/testing/shared-input.spec.ts index 8eb4268975e5..e51383ed0ffa 100644 --- a/src/material/input/testing/shared-input.spec.ts +++ b/src/material/input/testing/shared-input.spec.ts @@ -2,7 +2,7 @@ import {HarnessLoader} from '@angular/cdk/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; import {Component} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {ReactiveFormsModule} from '@angular/forms'; +import {FormsModule} from '@angular/forms'; import {MatInputModule} from '@angular/material/input'; import {getSupportedInputTypes} from '@angular/cdk/platform'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; @@ -18,7 +18,7 @@ export function runInputHarnessTests( beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, inputModule, ReactiveFormsModule], + imports: [NoopAnimationsModule, inputModule, FormsModule], declarations: [InputHarnessTest], }).compileComponents(); @@ -29,7 +29,7 @@ export function runInputHarnessTests( it('should load all input harnesses', async () => { const inputs = await loader.getAllHarnesses(inputHarness); - expect(inputs.length).toBe(6); + expect(inputs.length).toBe(7); }); it('should load input with specific id', async () => { @@ -68,37 +68,40 @@ export function runInputHarnessTests( it('should be able to get id of input', async () => { const inputs = await loader.getAllHarnesses(inputHarness); - expect(inputs.length).toBe(6); + expect(inputs.length).toBe(7); expect(await inputs[0].getId()).toMatch(/mat-input-\d+/); expect(await inputs[1].getId()).toMatch(/mat-input-\d+/); expect(await inputs[2].getId()).toBe('myTextarea'); expect(await inputs[3].getId()).toBe('nativeControl'); expect(await inputs[4].getId()).toMatch(/mat-input-\d+/); + expect(await inputs[5].getId()).toBe('has-ng-model'); }); it('should be able to get name of input', async () => { const inputs = await loader.getAllHarnesses(inputHarness); - expect(inputs.length).toBe(6); + expect(inputs.length).toBe(7); expect(await inputs[0].getName()).toBe('favorite-food'); expect(await inputs[1].getName()).toBe(''); expect(await inputs[2].getName()).toBe(''); expect(await inputs[3].getName()).toBe(''); expect(await inputs[4].getName()).toBe(''); + expect(await inputs[5].getName()).toBe('has-ng-model'); }); it('should be able to get value of input', async () => { const inputs = await loader.getAllHarnesses(inputHarness); - expect(inputs.length).toBe(6); + expect(inputs.length).toBe(7); expect(await inputs[0].getValue()).toBe('Sushi'); expect(await inputs[1].getValue()).toBe(''); expect(await inputs[2].getValue()).toBe(''); expect(await inputs[3].getValue()).toBe(''); expect(await inputs[4].getValue()).toBe(''); + expect(await inputs[5].getValue()).toBe(''); }); it('should be able to set value of input', async () => { const inputs = await loader.getAllHarnesses(inputHarness); - expect(inputs.length).toBe(6); + expect(inputs.length).toBe(7); expect(await inputs[0].getValue()).toBe('Sushi'); expect(await inputs[1].getValue()).toBe(''); expect(await inputs[3].getValue()).toBe(''); @@ -117,13 +120,14 @@ export function runInputHarnessTests( it('should be able to get disabled state', async () => { const inputs = await loader.getAllHarnesses(inputHarness); - expect(inputs.length).toBe(6); + expect(inputs.length).toBe(7); expect(await inputs[0].isDisabled()).toBe(false); expect(await inputs[1].isDisabled()).toBe(false); expect(await inputs[2].isDisabled()).toBe(false); expect(await inputs[3].isDisabled()).toBe(false); expect(await inputs[4].isDisabled()).toBe(false); + expect(await inputs[5].isDisabled()).toBe(false); fixture.componentInstance.disabled = true; @@ -132,13 +136,14 @@ export function runInputHarnessTests( it('should be able to get readonly state', async () => { const inputs = await loader.getAllHarnesses(inputHarness); - expect(inputs.length).toBe(6); + expect(inputs.length).toBe(7); expect(await inputs[0].isReadonly()).toBe(false); expect(await inputs[1].isReadonly()).toBe(false); expect(await inputs[2].isReadonly()).toBe(false); expect(await inputs[3].isReadonly()).toBe(false); expect(await inputs[4].isReadonly()).toBe(false); + expect(await inputs[5].isReadonly()).toBe(false); fixture.componentInstance.readonly = true; @@ -147,13 +152,14 @@ export function runInputHarnessTests( it('should be able to get required state', async () => { const inputs = await loader.getAllHarnesses(inputHarness); - expect(inputs.length).toBe(6); + expect(inputs.length).toBe(7); expect(await inputs[0].isRequired()).toBe(false); expect(await inputs[1].isRequired()).toBe(false); expect(await inputs[2].isRequired()).toBe(false); expect(await inputs[3].isRequired()).toBe(false); expect(await inputs[4].isRequired()).toBe(false); + expect(await inputs[5].isRequired()).toBe(false); fixture.componentInstance.required = true; @@ -162,22 +168,24 @@ export function runInputHarnessTests( it('should be able to get placeholder of input', async () => { const inputs = await loader.getAllHarnesses(inputHarness); - expect(inputs.length).toBe(6); + expect(inputs.length).toBe(7); expect(await inputs[0].getPlaceholder()).toBe('Favorite food'); expect(await inputs[1].getPlaceholder()).toBe(''); expect(await inputs[2].getPlaceholder()).toBe('Leave a comment'); expect(await inputs[3].getPlaceholder()).toBe('Native control'); expect(await inputs[4].getPlaceholder()).toBe(''); + expect(await inputs[5].getPlaceholder()).toBe(''); }); it('should be able to get type of input', async () => { const inputs = await loader.getAllHarnesses(inputHarness); - expect(inputs.length).toBe(6); + expect(inputs.length).toBe(7); expect(await inputs[0].getType()).toBe('text'); expect(await inputs[1].getType()).toBe('number'); expect(await inputs[2].getType()).toBe('textarea'); expect(await inputs[3].getType()).toBe('text'); expect(await inputs[4].getType()).toBe('textarea'); + expect(await inputs[5].getType()).toBe('text'); fixture.componentInstance.inputType = 'text'; @@ -248,6 +256,10 @@ export function runInputHarnessTests( + + + + @@ -258,4 +270,6 @@ class InputHarnessTest { readonly = false; disabled = false; required = false; + ngModelValue = ''; + ngModelName = 'has-ng-model'; } diff --git a/tools/public_api_guard/material/input.md b/tools/public_api_guard/material/input.md index 7f3897f19420..384f7dc3f80d 100644 --- a/tools/public_api_guard/material/input.md +++ b/tools/public_api_guard/material/input.md @@ -65,6 +65,7 @@ export class MatInput extends _MatInputBase implements MatFormFieldControl, protected _isNeverEmpty(): boolean; readonly _isServer: boolean; readonly _isTextarea: boolean; + name: string; // (undocumented) protected _neverEmptyInputTypes: string[]; // (undocumented) @@ -103,7 +104,7 @@ export class MatInput extends _MatInputBase implements MatFormFieldControl, get value(): string; set value(value: any); // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; }