From 5967674c6513a5ace236252a484eef658f813d77 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 17 Aug 2016 19:47:49 +0200 Subject: [PATCH] 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. --- src/components/input/README.md | 4 +-- src/components/input/input.html | 18 ++++++------- src/components/input/input.spec.ts | 42 +++++++++++++++--------------- src/components/input/input.ts | 18 ++++++------- 4 files changed, 41 insertions(+), 41 deletions(-) diff --git a/src/components/input/README.md b/src/components/input/README.md index 583cca96c3d0..c49f55b394d8 100644 --- 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 - {{characterCountHintExample.characterCount}} / 100 @@ -105,7 +105,7 @@ You can make a full form using inputs, and it will support autofill natively. -
{{postalCode.characterCount}} / 5 diff --git a/src/components/input/input.html b/src/components/input/input.html index 33bd44808055..1f9d82350f1e 100644 --- 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 index c89551318392..0e1ede639a5f 100644 --- 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: ``}) class MdInputWithNameTestController { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithAutocomplete { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithUnboundAutocomplete { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithUnboundAutocompleteWithValue { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithAutocorrect { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithUnboundAutocorrect { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithAutocapitalize { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithUnboundAutocapitalize { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithAutofocus { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithUnboundAutofocus { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithReadonly { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithUnboundReadonly { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithSpellcheck { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithUnboundSpellcheck { } @Component({template: ``}) @@ -695,5 +695,5 @@ class MdInputWithMin { } @Component({template: ``}) class MdInputWithStep { } -@Component({template: ``}) +@Component({template: ``}) class MdInputWithTabindex { } diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 40f49c52b959..b13f67cb55a9 100644 --- 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;