Skip to content

Commit f3a7b91

Browse files
devversionjelbourn
devversion
authored and
jelbourn
committed
fix(input): make attributes match native ones (#1066)
* 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.
1 parent f20d626 commit f3a7b91

File tree

4 files changed

+41
-41
lines changed

4 files changed

+41
-41
lines changed

‎src/lib/input/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ Specifying a side twice will result in an exception during initialization.
5151
A simple character counter can be made like the following:
5252

5353
```html
54-
<md-input placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"
54+
<md-input placeholder="Character count (100 max)" maxlength="100" class="demo-full-width"
5555
value="Hello world. How are you?"
5656
#characterCountHintExample>
5757
<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.
105105
<table style="width: 100%" cellspacing="0"><tr>
106106
<td><md-input class="demo-full-width" placeholder="City"></md-input></td>
107107
<td><md-input class="demo-full-width" placeholder="State"></md-input></td>
108-
<td><md-input #postalCode class="demo-full-width" maxLength="5"
108+
<td><md-input #postalCode class="demo-full-width" maxlength="5"
109109
placeholder="Postal Code"
110110
value="94043">
111111
<md-hint align="end">{{postalCode.characterCount}} / 5</md-hint>

‎src/lib/input/input.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,22 @@
1212
[attr.aria-disabled]="ariaDisabled"
1313
[attr.aria-required]="ariaRequired"
1414
[attr.aria-invalid]="ariaInvalid"
15-
[attr.autocomplete]="autoComplete"
16-
[attr.autocorrect]="autoCorrect"
17-
[attr.autocapitalize]="autoCapitalize"
18-
[autofocus]="autoFocus"
15+
[attr.autocomplete]="autocomplete"
16+
[attr.autocorrect]="autocorrect"
17+
[attr.autocapitalize]="autocapitalize"
18+
[autofocus]="autofocus"
1919
[disabled]="disabled"
2020
[id]="inputId"
2121
[attr.list]="list"
2222
[attr.max]="max"
23-
[attr.maxlength]="maxLength"
23+
[attr.maxlength]="maxlength"
2424
[attr.min]="min"
25-
[attr.minlength]="minLength"
26-
[readonly]="readOnly"
25+
[attr.minlength]="minlength"
26+
[readonly]="readonly"
2727
[required]="required"
28-
[spellcheck]="spellCheck"
28+
[spellcheck]="spellcheck"
2929
[attr.step]="step"
30-
[attr.tabindex]="tabIndex"
30+
[attr.tabindex]="tabindex"
3131
[type]="type"
3232
[attr.name]="name"
3333
(focus)="_handleFocus($event)"

‎src/lib/input/input.spec.ts‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ describe('MdInput', function () {
269269
expect(el).not.toBeNull();
270270
expect(el.getAttribute('autocomplete')).toBeNull();
271271

272-
input.autoComplete = 'on';
272+
input.autocomplete = 'on';
273273
fixture.detectChanges();
274274
expect(el.getAttribute('autocomplete')).toEqual('on');
275275
});
@@ -284,7 +284,7 @@ describe('MdInput', function () {
284284
expect(el).not.toBeNull();
285285
expect(el.getAttribute('autocorrect')).toBeNull();
286286

287-
input.autoCorrect = 'on';
287+
input.autocorrect = 'on';
288288
fixture.detectChanges();
289289
expect(el.getAttribute('autocorrect')).toEqual('on');
290290
});
@@ -299,7 +299,7 @@ describe('MdInput', function () {
299299
expect(el).not.toBeNull();
300300
expect(el.getAttribute('autocapitalize')).toBeNull();
301301

302-
input.autoCapitalize = 'on';
302+
input.autocapitalize = 'on';
303303
fixture.detectChanges();
304304
expect(el.getAttribute('autocapitalize')).toEqual('on');
305305
});
@@ -334,7 +334,7 @@ describe('MdInput', function () {
334334
expect(el).not.toBeNull();
335335
expect(el.getAttribute('autofocus')).toBeNull();
336336

337-
input.autoFocus = true;
337+
input.autofocus = true;
338338
fixture.detectChanges();
339339
expect(el.getAttribute('autofocus')).toEqual('');
340340
});
@@ -442,7 +442,7 @@ describe('MdInput', function () {
442442
expect(el).not.toBeNull();
443443
expect(el.getAttribute('readonly')).toBeNull();
444444

445-
input.readOnly = true;
445+
input.readonly = true;
446446
fixture.detectChanges();
447447
expect(el.getAttribute('readonly')).toEqual('');
448448
});
@@ -492,7 +492,7 @@ describe('MdInput', function () {
492492
expect(el).not.toBeNull();
493493
expect(el.getAttribute('spellcheck')).toEqual('false');
494494

495-
input.spellCheck = true;
495+
input.spellcheck = true;
496496
fixture.detectChanges();
497497
expect(el.getAttribute('spellcheck')).toEqual('true');
498498
});
@@ -532,7 +532,7 @@ describe('MdInput', function () {
532532
expect(el).not.toBeNull();
533533
expect(el.getAttribute('tabindex')).toEqual(null);
534534

535-
input.tabIndex = 1;
535+
input.tabindex = 1;
536536
fixture.detectChanges();
537537
expect(el.getAttribute('tabindex')).toEqual('1');
538538
});
@@ -630,43 +630,43 @@ class MdInputWithBlurAndFocusEvents {
630630
@Component({template: `<md-input name="some-name"></md-input>`})
631631
class MdInputWithNameTestController { }
632632

633-
@Component({template: `<md-input [autoComplete]="autoComplete"></md-input>`})
633+
@Component({template: `<md-input [autocomplete]="autoComplete"></md-input>`})
634634
class MdInputWithAutocomplete { }
635635

636-
@Component({template: `<md-input autoComplete></md-input>`})
636+
@Component({template: `<md-input autocomplete></md-input>`})
637637
class MdInputWithUnboundAutocomplete { }
638638

639-
@Component({template: `<md-input autoComplete="name"></md-input>`})
639+
@Component({template: `<md-input autocomplete="name"></md-input>`})
640640
class MdInputWithUnboundAutocompleteWithValue { }
641641

642-
@Component({template: `<md-input [autoCorrect]="autoCorrect"></md-input>`})
642+
@Component({template: `<md-input [autocorrect]="autoCorrect"></md-input>`})
643643
class MdInputWithAutocorrect { }
644644

645-
@Component({template: `<md-input autoCorrect></md-input>`})
645+
@Component({template: `<md-input autocorrect></md-input>`})
646646
class MdInputWithUnboundAutocorrect { }
647647

648-
@Component({template: `<md-input [autoCapitalize]="autoCapitalize"></md-input>`})
648+
@Component({template: `<md-input [autocapitalize]="autoCapitalize"></md-input>`})
649649
class MdInputWithAutocapitalize { }
650650

651-
@Component({template: `<md-input autoCapitalize></md-input>`})
651+
@Component({template: `<md-input autocapitalize></md-input>`})
652652
class MdInputWithUnboundAutocapitalize { }
653653

654-
@Component({template: `<md-input [autoFocus]="autoFocus"></md-input>`})
654+
@Component({template: `<md-input [autofocus]="autoFocus"></md-input>`})
655655
class MdInputWithAutofocus { }
656656

657-
@Component({template: `<md-input autoFocus></md-input>`})
657+
@Component({template: `<md-input autofocus></md-input>`})
658658
class MdInputWithUnboundAutofocus { }
659659

660-
@Component({template: `<md-input [readOnly]="readOnly"></md-input>`})
660+
@Component({template: `<md-input [readonly]="readOnly"></md-input>`})
661661
class MdInputWithReadonly { }
662662

663-
@Component({template: `<md-input readOnly></md-input>`})
663+
@Component({template: `<md-input readonly></md-input>`})
664664
class MdInputWithUnboundReadonly { }
665665

666-
@Component({template: `<md-input [spellCheck]="spellcheck"></md-input>`})
666+
@Component({template: `<md-input [spellcheck]="spellcheck"></md-input>`})
667667
class MdInputWithSpellcheck { }
668668

669-
@Component({template: `<md-input spellCheck></md-input>`})
669+
@Component({template: `<md-input spellcheck></md-input>`})
670670
class MdInputWithUnboundSpellcheck { }
671671

672672
@Component({template: `<md-input [disabled]="disabled"></md-input>`})
@@ -695,5 +695,5 @@ class MdInputWithMin { }
695695
@Component({template: `<md-input [step]="step"></md-input>`})
696696
class MdInputWithStep { }
697697

698-
@Component({template: `<md-input [tabIndex]="tabIndex"></md-input>`})
698+
@Component({template: `<md-input [tabindex]="tabIndex"></md-input>`})
699699
class MdInputWithTabindex { }

‎src/lib/input/input.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -142,23 +142,23 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
142142
@Input() @BooleanFieldValue() floatingPlaceholder: boolean = true;
143143
@Input() hintLabel: string = '';
144144

145-
@Input() autoComplete: string;
146-
@Input() autoCorrect: string;
147-
@Input() autoCapitalize: string;
148-
@Input() @BooleanFieldValue() autoFocus: boolean = false;
145+
@Input() autocomplete: string;
146+
@Input() autocorrect: string;
147+
@Input() autocapitalize: string;
148+
@Input() @BooleanFieldValue() autofocus: boolean = false;
149149
@Input() @BooleanFieldValue() disabled: boolean = false;
150150
@Input() id: string = `md-input-${nextUniqueId++}`;
151151
@Input() list: string = null;
152152
@Input() max: string | number = null;
153-
@Input() maxLength: number = null;
153+
@Input() maxlength: number = null;
154154
@Input() min: string | number = null;
155-
@Input() minLength: number = null;
155+
@Input() minlength: number = null;
156156
@Input() placeholder: string = null;
157-
@Input() @BooleanFieldValue() readOnly: boolean = false;
157+
@Input() @BooleanFieldValue() readonly: boolean = false;
158158
@Input() @BooleanFieldValue() required: boolean = false;
159-
@Input() @BooleanFieldValue() spellCheck: boolean = false;
159+
@Input() @BooleanFieldValue() spellcheck: boolean = false;
160160
@Input() step: number = null;
161-
@Input() tabIndex: number = null;
161+
@Input() tabindex: number = null;
162162
@Input() type: string = 'text';
163163
@Input() name: string = null;
164164

0 commit comments

Comments
 (0)