fix(material/input): inconsistently reading name from input with ngModel

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.

Author: crisbeto

src/material-experimental/mdc-input/input.ts

@@ -35,6 +35,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

src/material/input/input.ts

@@ -80,6 +80,7 @@ const _MatInputBase = mixinErrorState(class {
     '[attr.data-placeholder]': 'placeholder',
     '[disabled]': 'disabled',
     '[required]': 'required',
+    '[attr.name]': 'name || null',
     '[attr.readonly]': 'readonly && !_isNativeSelect || null',
     // Only mark the input as invalid for assistive technology if it has a value since the
     // state usually overlaps with `aria-required` when the input is empty and can be redundant.
@@ -169,6 +170,12 @@ export class MatInput extends _MatInputBase implements MatFormFieldControl<any>,
    */
   @Input() placeholder: string;
 
+  /**
+   * Name of the input.
+   * @docs-private
+   */
+  @Input() name: string;
+
   /**
    * Implemented as part of MatFormFieldControl.
    * @docs-private

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';
@@ -17,7 +17,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 () => {
@@ -67,37 +67,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('');
@@ -116,13 +119,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;
 
@@ -131,13 +135,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;
 
@@ -146,13 +151,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;
 
@@ -161,22 +167,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';
 
@@ -247,6 +255,10 @@ export function runInputHarnessTests(
       </select>
     </mat-form-field>
 
+    <mat-form-field>
+      <input [(ngModel)]="ngModelValue" [name]="ngModelName" id="has-ng-model" matNativeControl>
+    </mat-form-field>
+
     <mat-form-field>
       <input matNativeControl placeholder="Color control" id="colorControl" type="color">
     </mat-form-field>
@@ -257,4 +269,6 @@ class InputHarnessTest {
   readonly = false;
   disabled = false;
   required = false;
+  ngModelValue = '';
+  ngModelName = 'has-ng-model';
 }

tools/public_api_guard/material/input.md

@@ -65,6 +65,7 @@ export class MatInput extends _MatInputBase implements MatFormFieldControl<any>,
     protected _isNeverEmpty(): boolean;
     readonly _isServer: boolean;
     readonly _isTextarea: boolean;
+    name: string;
     // (undocumented)
     protected _neverEmptyInputTypes: string[];
     // (undocumented)
@@ -111,7 +112,7 @@ export class MatInput extends _MatInputBase implements MatFormFieldControl<any>,
     get value(): string;
     set value(value: string);
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatInput, "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", ["matInput"], { "disabled": "disabled"; "id": "id"; "placeholder": "placeholder"; "required": "required"; "type": "type"; "errorStateMatcher": "errorStateMatcher"; "userAriaDescribedBy": "aria-describedby"; "value": "value"; "readonly": "readonly"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatInput, "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", ["matInput"], { "disabled": "disabled"; "id": "id"; "placeholder": "placeholder"; "name": "name"; "required": "required"; "type": "type"; "errorStateMatcher": "errorStateMatcher"; "userAriaDescribedBy": "aria-describedby"; "value": "value"; "readonly": "readonly"; }, {}, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatInput, [null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }, null, null, { optional: true; }]>;
 }