16

I can render the following Angular 2 component containing an <input> with a maxlength set:

@Component({
  selector: 'app',
  template: '<input maxlength="10">',
})
export class App {
}

This works fine. However, if I try to set the maxlength via a binding, like this:

@Component({
  selector: 'app',
  template: '<input [maxlength]="maxLength">',
})
export class App {
    maxLength = 10;
}

Or like this:

  template: '<input maxlength="{{maxLength}}">',

I get the following error:

"Template parse errors: Can't bind to 'maxlength' since it isn't a known property of 'input'."

Why? maxlength is a perfectly valid property of an <input> element.

Here's a live example (open console to see error).

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
Mud
  • 28,277
  • 11
  • 59
  • 92

2 Answers2

49

excerpts from Angular documentation,

Attribute Binding

We become painfully aware of this fact when we try to write something like this:

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr> We get this

error:

Template parse errors: Can't bind to 'colspan' since it
isn't a known native property

As the message says, the element does not have a colspan property. It has the "colspan" attribute, but interpolation and property binding can set only properties, not attributes.

We need attribute bindings to create and bind to such attributes.

Attribute binding syntax resembles property binding. Instead of an element property between brackets, we start with the prefix attr, followed by a dot (.) and the name of the attribute. We then set the attribute value, using an expression that resolves to a string.

Here's a relevant Stack Overflow post about the difference between properties and attributes.

You may try below,

@Component({
  selector: 'app',
  template: '<input [attr.maxlength]="maxLength" >',
})
export class App {
    maxLength = '10';
}


@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Here is the updated and it works Plunker!!

Madhu Ranjan
  • 17,334
  • 7
  • 60
  • 69
  • Thanks so much. What does that mean, how did it occur to you, is there documentation about it, etc.? I just need to know how to explain this to my coworkers. – Mud Sep 29 '16 at 03:58
  • Good answer - supported by the Angular docs which recommend this exact approach (which is required to support the Angular MaxLengthValidator) - https://angular.io/api/forms/MaxLengthValidator – Chris Halcrow Sep 26 '18 at 00:32
0

we upload [attr.maxlength]="[field?.maxCharacters || '9999']"

Dushyant Singh
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 09 '23 at 13:11
  • I would suggest the initial value of input type="text" meaning: [attr.maxlength]="[field?.maxCharacters || '524288']" https://stackoverflow.com/questions/26469152/why-is-the-default-max-length-for-an-input-524288 – Leroy Meijer Jul 24 '23 at 11:23