fix(input/testing): 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

@@ -31,6 +31,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',
     '[attr.aria-describedby]': '_ariaDescribedby || null',

src/material/input/input.ts

@@ -80,6 +80,7 @@ const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
     '[attr.placeholder]': 'placeholder',
     '[disabled]': 'disabled',
     '[required]': 'required',
+    '[attr.name]': 'name || null',
     '[attr.readonly]': 'readonly && !_isNativeSelect || null',
     '[attr.aria-describedby]': '_ariaDescribedby || null',
     '[attr.aria-invalid]': 'errorState',
@@ -166,6 +167,12 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
    */
   @Input() placeholder: string;
 
+  /**
+   * Name of the input.
+   * @docs-private
+   */
+  @Input() name: string;
+
   /**
    * Implemented as part of MatFormFieldControl.
    * @docs-private

src/material/input/testing/shared.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 runHarnessTests(
   beforeEach(async () => {
     await TestBed
         .configureTestingModule({
-          imports: [NoopAnimationsModule, inputModule, ReactiveFormsModule],
+          imports: [NoopAnimationsModule, inputModule, FormsModule],
           declarations: [InputHarnessTest],
         })
         .compileComponents();
@@ -29,7 +29,7 @@ export function runHarnessTests(
 
   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 () => {
@@ -50,37 +50,40 @@ export function runHarnessTests(
 
   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('');
@@ -99,13 +102,14 @@ export function runHarnessTests(
 
   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;
 
@@ -114,13 +118,14 @@ export function runHarnessTests(
 
   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;
 
@@ -129,13 +134,14 @@ export function runHarnessTests(
 
   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;
 
@@ -144,22 +150,24 @@ export function runHarnessTests(
 
   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';
 
@@ -234,6 +242,10 @@ function getActiveElementTagName() {
       </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>
@@ -244,4 +256,6 @@ class InputHarnessTest {
   readonly = false;
   disabled = false;
   required = false;
+  ngModelValue = '';
+  ngModelName = 'has-ng-model';
 }

tools/public_api_guard/material/input.d.ts

@@ -27,6 +27,7 @@ export declare class MatInput extends _MatInputMixinBase implements MatFormField
     focused: boolean;
     get id(): string;
     set id(value: string);
+    name: string;
     ngControl: NgControl;
     placeholder: string;
     get readonly(): boolean;
@@ -58,7 +59,7 @@ export declare class MatInput extends _MatInputMixinBase implements MatFormField
     static ngAcceptInputType_readonly: BooleanInput;
     static ngAcceptInputType_required: BooleanInput;
     static ngAcceptInputType_value: any;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatInput, "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", ["matInput"], { "disabled": "disabled"; "id": "id"; "placeholder": "placeholder"; "required": "required"; "type": "type"; "errorStateMatcher": "errorStateMatcher"; "value": "value"; "readonly": "readonly"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<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"; "value": "value"; "readonly": "readonly"; }, {}, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatInput, [null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }, null, null]>;
 }