fix(input): attributes should match native ones

* The input attribute bindings did not match the native ones, and this could cause confusion. Now since they are consistent it is super simple to port a previous Angular 2 native input to an `md-input` Fixes #1065.
angular · Aug 17, 2016 · 5967674 · 5967674
1 parent 32eacd2
commit 5967674
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 41 deletions.
diff --git a/src/components/input/README.md b/src/components/input/README.md
@@ -51,7 +51,7 @@ Specifying a side twice will result in an exception during initialization.
 A simple character counter can be made like the following:
 
 ```html
-<md-input placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"
+<md-input placeholder="Character count (100 max)" maxlength="100" class="demo-full-width"
           value="Hello world. How are you?"
           #characterCountHintExample>
   <md-hint align="end">{{characterCountHintExample.characterCount}} / 100</md-hint>
@@ -105,7 +105,7 @@ You can make a full form using inputs, and it will support autofill natively.
       <table style="width: 100%" cellspacing="0"><tr>
         <td><md-input class="demo-full-width" placeholder="City"></md-input></td>
         <td><md-input class="demo-full-width" placeholder="State"></md-input></td>
-        <td><md-input #postalCode class="demo-full-width" maxLength="5"
+        <td><md-input #postalCode class="demo-full-width" maxlength="5"
                       placeholder="Postal Code"
                       value="94043">
           <md-hint align="end">{{postalCode.characterCount}} / 5</md-hint>

diff --git a/src/components/input/input.html b/src/components/input/input.html
@@ -12,22 +12,22 @@
              [attr.aria-disabled]="ariaDisabled"
              [attr.aria-required]="ariaRequired"
              [attr.aria-invalid]="ariaInvalid"
-             [attr.autocomplete]="autoComplete"
-             [attr.autocorrect]="autoCorrect"
-             [attr.autocapitalize]="autoCapitalize"
-             [autofocus]="autoFocus"
+             [attr.autocomplete]="autocomplete"
+             [attr.autocorrect]="autocorrect"
+             [attr.autocapitalize]="autocapitalize"
+             [autofocus]="autofocus"
              [disabled]="disabled"
              [id]="inputId"
              [attr.list]="list"
              [attr.max]="max"
-             [attr.maxlength]="maxLength"
+             [attr.maxlength]="maxlength"
              [attr.min]="min"
-             [attr.minlength]="minLength"
-             [readonly]="readOnly"
+             [attr.minlength]="minlength"
+             [readonly]="readonly"
              [required]="required"
-             [spellcheck]="spellCheck"
+             [spellcheck]="spellcheck"
              [attr.step]="step"
-             [attr.tabindex]="tabIndex"
+             [attr.tabindex]="tabindex"
              [type]="type"
              [attr.name]="name"
              (focus)="_handleFocus($event)"

diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts
@@ -269,7 +269,7 @@ describe('MdInput', function () {
     expect(el).not.toBeNull();
     expect(el.getAttribute('autocomplete')).toBeNull();
 
-    input.autoComplete = 'on';
+    input.autocomplete = 'on';
     fixture.detectChanges();
     expect(el.getAttribute('autocomplete')).toEqual('on');
   });
@@ -284,7 +284,7 @@ describe('MdInput', function () {
     expect(el).not.toBeNull();
     expect(el.getAttribute('autocorrect')).toBeNull();
 
-    input.autoCorrect = 'on';
+    input.autocorrect = 'on';
     fixture.detectChanges();
     expect(el.getAttribute('autocorrect')).toEqual('on');
   });
@@ -299,7 +299,7 @@ describe('MdInput', function () {
     expect(el).not.toBeNull();
     expect(el.getAttribute('autocapitalize')).toBeNull();
 
-    input.autoCapitalize = 'on';
+    input.autocapitalize = 'on';
     fixture.detectChanges();
     expect(el.getAttribute('autocapitalize')).toEqual('on');
   });
@@ -334,7 +334,7 @@ describe('MdInput', function () {
     expect(el).not.toBeNull();
     expect(el.getAttribute('autofocus')).toBeNull();
 
-    input.autoFocus = true;
+    input.autofocus = true;
     fixture.detectChanges();
     expect(el.getAttribute('autofocus')).toEqual('');
   });
@@ -442,7 +442,7 @@ describe('MdInput', function () {
     expect(el).not.toBeNull();
     expect(el.getAttribute('readonly')).toBeNull();
 
-    input.readOnly = true;
+    input.readonly = true;
     fixture.detectChanges();
     expect(el.getAttribute('readonly')).toEqual('');
   });
@@ -492,7 +492,7 @@ describe('MdInput', function () {
     expect(el).not.toBeNull();
     expect(el.getAttribute('spellcheck')).toEqual('false');
 
-    input.spellCheck = true;
+    input.spellcheck = true;
     fixture.detectChanges();
     expect(el.getAttribute('spellcheck')).toEqual('true');
   });
@@ -532,7 +532,7 @@ describe('MdInput', function () {
     expect(el).not.toBeNull();
     expect(el.getAttribute('tabindex')).toEqual(null);
 
-    input.tabIndex = 1;
+    input.tabindex = 1;
     fixture.detectChanges();
     expect(el.getAttribute('tabindex')).toEqual('1');
   });
@@ -630,43 +630,43 @@ class MdInputWithBlurAndFocusEvents {
 @Component({template: `<md-input name="some-name"></md-input>`})
 class MdInputWithNameTestController { }
 
-@Component({template: `<md-input [autoComplete]="autoComplete"></md-input>`})
+@Component({template: `<md-input [autocomplete]="autoComplete"></md-input>`})
 class MdInputWithAutocomplete { }
 
-@Component({template: `<md-input autoComplete></md-input>`})
+@Component({template: `<md-input autocomplete></md-input>`})
 class MdInputWithUnboundAutocomplete { }
 
-@Component({template: `<md-input autoComplete="name"></md-input>`})
+@Component({template: `<md-input autocomplete="name"></md-input>`})
 class MdInputWithUnboundAutocompleteWithValue { }
 
-@Component({template: `<md-input [autoCorrect]="autoCorrect"></md-input>`})
+@Component({template: `<md-input [autocorrect]="autoCorrect"></md-input>`})
 class MdInputWithAutocorrect { }
 
-@Component({template: `<md-input autoCorrect></md-input>`})
+@Component({template: `<md-input autocorrect></md-input>`})
 class MdInputWithUnboundAutocorrect { }
 
-@Component({template: `<md-input [autoCapitalize]="autoCapitalize"></md-input>`})
+@Component({template: `<md-input [autocapitalize]="autoCapitalize"></md-input>`})
 class MdInputWithAutocapitalize { }
 
-@Component({template: `<md-input autoCapitalize></md-input>`})
+@Component({template: `<md-input autocapitalize></md-input>`})
 class MdInputWithUnboundAutocapitalize { }
 
-@Component({template: `<md-input [autoFocus]="autoFocus"></md-input>`})
+@Component({template: `<md-input [autofocus]="autoFocus"></md-input>`})
 class MdInputWithAutofocus { }
 
-@Component({template: `<md-input autoFocus></md-input>`})
+@Component({template: `<md-input autofocus></md-input>`})
 class MdInputWithUnboundAutofocus { }
 
-@Component({template: `<md-input [readOnly]="readOnly"></md-input>`})
+@Component({template: `<md-input [readonly]="readOnly"></md-input>`})
 class MdInputWithReadonly { }
 
-@Component({template: `<md-input readOnly></md-input>`})
+@Component({template: `<md-input readonly></md-input>`})
 class MdInputWithUnboundReadonly { }
 
-@Component({template: `<md-input [spellCheck]="spellcheck"></md-input>`})
+@Component({template: `<md-input [spellcheck]="spellcheck"></md-input>`})
 class MdInputWithSpellcheck { }
 
-@Component({template: `<md-input spellCheck></md-input>`})
+@Component({template: `<md-input spellcheck></md-input>`})
 class MdInputWithUnboundSpellcheck { }
 
 @Component({template: `<md-input [disabled]="disabled"></md-input>`})
@@ -695,5 +695,5 @@ class MdInputWithMin { }
 @Component({template: `<md-input [step]="step"></md-input>`})
 class MdInputWithStep { }
 
-@Component({template: `<md-input [tabIndex]="tabIndex"></md-input>`})
+@Component({template: `<md-input [tabindex]="tabIndex"></md-input>`})
 class MdInputWithTabindex { }
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
@@ -142,23 +142,23 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
   @Input() @BooleanFieldValue() floatingPlaceholder: boolean = true;
   @Input() hintLabel: string = '';
 
-  @Input() autoComplete: string;
-  @Input() autoCorrect: string;
-  @Input() autoCapitalize: string;
-  @Input() @BooleanFieldValue() autoFocus: boolean = false;
+  @Input() autocomplete: string;
+  @Input() autocorrect: string;
+  @Input() autocapitalize: string;
+  @Input() @BooleanFieldValue() autofocus: boolean = false;
   @Input() @BooleanFieldValue() disabled: boolean = false;
   @Input() id: string = `md-input-${nextUniqueId++}`;
   @Input() list: string = null;
   @Input() max: string | number = null;
-  @Input() maxLength: number = null;
+  @Input() maxlength: number = null;
   @Input() min: string | number = null;
-  @Input() minLength: number = null;
+  @Input() minlength: number = null;
   @Input() placeholder: string = null;
-  @Input() @BooleanFieldValue() readOnly: boolean = false;
+  @Input() @BooleanFieldValue() readonly: boolean = false;
   @Input() @BooleanFieldValue() required: boolean = false;
-  @Input() @BooleanFieldValue() spellCheck: boolean = false;
+  @Input() @BooleanFieldValue() spellcheck: boolean = false;
   @Input() step: number = null;
-  @Input() tabIndex: number = null;
+  @Input() tabindex: number = null;
   @Input() type: string = 'text';
   @Input() name: string = null;