Angular 2 set input max length dynamically

Question

I would like to get the max length of an input from a service (do an http call to get the value).

Is there any way to do it with calling the service only once?

<input type="text" [attr.maxLength]="getMaxLength()/>

score 8 · Answer 1 · answered Oct 23 '17 at 09:41

8

Setting maxLength attribute value to a class property which value is set in contructor or ngOnInit will make it stop calling the service anymore

HTML:

<input type="text" [maxLength]="maxLength"/>

Typescript

  maxLength: number;
  .....
  constructor(private myService: MyService){
    this.maxLength =  this.myService.getMaxLength();
  }

DEMO

answered Oct 23 '17 at 09:41

Vega

27,856
27
95
103

maxLength should be {{EditStringCharLimit}} in angular, did you test this? or perhaps the spec has changed since angular 2, either way: This answer is NOT correct. – Jamie Nicholl-Shelley May 31 '22 at 17:27
@JamieNicholl-Shelley, where do you want to put that? It was 5 yeqàrs ago and I don't re-read the question, but I think the demo works, so yes, I did test it – Vega May 31 '22 at 17:33
If you have a specific case, post a demo and I could help to debug – Vega May 31 '22 at 17:35
@JamieNicholl-Shelley And I don't understand why would you comment and downvote this answer only, while neither of others say anything about what you seems looking for? – Vega May 31 '22 at 18:05
"maxLength" does not work, it needs to be {{maxLength}}. this was the original question and your answer gave incorrect information. – Jamie Nicholl-Shelley May 31 '22 at 18:16
Thanks, it's working for me with {{maxLength}} either your answre is outdated, or there is a caviat in angular that allows both types. – Jamie Nicholl-Shelley May 31 '22 at 18:43
Please edit your answer to include [maxLength]="maxLength" and maxLength="{{maxLength}}" as per: https://stackoverflow.com/questions/36862723/difference-between-and-for-binding-state-to-property – Jamie Nicholl-Shelley May 31 '22 at 18:46

Younis Ar M · Answer 2 · 2017-10-19T11:57:59.330

You can get the value of max from service and store it in a local value and that can be directly bound to the element.

Please find the example in the link

https://plnkr.co/edit/FX2DH96Femf02XwBUeCO

    @Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      Quantity (between 10 and 100):
      <input type="number" name="quantity" min="{{min}}" max="{{max}}">
      <br/>
      Name (max length - 10 character)
      <input type="text" name="name" [attr.maxLength]="maxTextLen">
    </div>
  `,
})
export class App {
  name:string;
  min : number;
  max : number;
  maxTextLen;

  constructor() {
    this.name = `Angular! v${VERSION.full}`
    this.min = 10;
    this.max = 100;
    this.maxTextLen = 10;

  }
}

score 0 · Answer 3 · answered Oct 19 '17 at 11:57

Use the method call during the constructor and update a component variable

constructor(private _http: Http) {
    this.getMaxLength().subscribe(data=>{
      console.log(data)
      this.maxLength= data;
      })

  }
  getMaxLength(): Observable<number> {
        return this._http.get(this._url)
            .map((response: Response) => response.json())
            .catch(this.handleError);
    }

LIVE DEMO

score -1 · Answer 4 · answered Oct 19 '17 at 11:51

-1

In your component.ts

maxLenght:number = 0;

ngOnInit() {
  this.service.getMaxLength()
    .subscribe(max => {
      this.maxLenght = max;
     });
}

then in the view

<input type="text" [attr.maxLength]="maxLength"/>

answered Oct 19 '17 at 11:51

Ivan Mladenov

1,787
12
16

Angular 2 set input max length dynamically

4 Answers4

Linked