Permalink
Browse files

maxlength in textfield (#404)

* new attribute maxlength in textfield

* repair formatting of the document for better merge

* test for maxlength added
  • Loading branch information...
1 parent 112895e commit 0c4406ffcfc1eae781bcb2d5373553686a3b3643 @tomicasoft tomicasoft committed with Jan 9, 2017
@@ -49,6 +49,16 @@
]]>
</pre>
+<h5>Set max length</h5>
+
+<mdl-textfield type="text" label="maxlength is 10" maxlength="10"></mdl-textfield>
+
+<pre prism>
+ <![CDATA[
+<mdl-textfield type="text" label="maxlength is 10" maxlength="10"></mdl-textfield>
+ ]]>
+</pre>
+
<h5>Text/Numeric with floating label</h5>
<mdl-textfield name="text1" type="text" label="Text..." [(ngModel)]="text3" floating-label></mdl-textfield>
@@ -249,6 +259,11 @@
</tr>
<tr>
+ <td>maxlength</td>
+ <td>The max. length for the input field.</td>
+ </tr>
+
+ <tr>
<td>(blur)</td>
<td>The event fires if the input element is loosing the focus.</td>
</tr>
@@ -586,6 +586,22 @@ describe('Component: MdlTextField', () => {
expect(tfEl).toBeDefined();
});
+
+ it('shoud support the maxlength attribute', () => {
+ TestBed.overrideComponent(MdlTestComponent, { set: {
+ template: `
+ <mdl-textfield type="text" [maxlength]="10"></mdl-textfield>'
+ `
+ }});
+ let fixture = TestBed.createComponent(MdlTestComponent);
+ fixture.detectChanges();
+
+ let inputEl: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(inputEl.getAttribute('maxlength')).toBe('10', 'the maxlength attribute should be set');
+
+ });
+
});
@@ -89,6 +89,7 @@ const IS_DIRTY = 'is-dirty';
[autofocus]="autofocus"
[readonly]="readonly"
[attr.tabindex]="tabindex"
+ [maxlength]="maxlength"
>
<label class="mdl-textfield__label" [attr.for]="id">{{label}}</label>
<span class="mdl-textfield__error">{{errorMessage}}</span>
@@ -118,6 +119,7 @@ const IS_DIRTY = 'is-dirty';
[autofocus]="autofocus"
[readonly]="readonly"
[attr.tabindex]="tabindex"
+ [maxlength]="maxlength"
>
<label class="mdl-textfield__label" [attr.for]="id">{{label}}</label>
<span class="mdl-textfield__error">{{errorMessage}}</span>
@@ -200,6 +202,8 @@ export class MdlTextFieldComponent implements ControlValueAccessor, OnChanges, D
@Input() public tabindex: number = null;
+ @Input() public maxlength: number = null;
+
// @experimental
private _disableNativeValidityChecking: boolean = false;

0 comments on commit 0c4406f

Please sign in to comment.