javascript - Dynamically change maxLength value of angular 2 Validators.maxLength - Stack Overflow

In form group validation I try to apply input maximum length, however, this max length depends of other action in form. If they change, also change value of property of maxMsgLength.

msg : ['', Validators.maxLength(this.maxMsgLength)],

However after change of maxMsgLength, validator stick to old maxMsgLength value. Is there a method to restart validation for this validation field with new value of maxLength?

Code: class Account { maxMsgLength = 200; newAccount: FormGroup;

//activated by click on another method
    private changeMaxMsgLength() : void {
    let values = Object.values(this.accountsStorage);
    if(values.includes("oldAccount")) {
      this.maxMsgLength = 150;
    } else {
      this.maxMsgLength = 200;
    }
  }

  ngOnInit(): void {
    this.newAccount = this.formbuilder.group({
      msg         : ['', Validators.maxLength(this.maxMsglength)],
      link        : ['', Validators.pattern('^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$')],
      schedule    : ['', Validators.pattern('^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) (2[0-3]|[01][0-9]):[0-5][0-9]$')]
    });

  }

} 
 //where in template there is 


<div class="form-group">
    <label for="name">Message</label>
    <textarea class="form-control" id="Message" formControlName="msg" style="width: 300px; height: 150px;"></textarea>
</div>
<div class="error" *ngIf="newAccount.get('msg').hasError('maxlength')">
    Maximum of {{maxMsglength}} characters
</div>

In form group validation I try to apply input maximum length, however, this max length depends of other action in form. If they change, also change value of property of maxMsgLength.

msg : ['', Validators.maxLength(this.maxMsgLength)],

However after change of maxMsgLength, validator stick to old maxMsgLength value. Is there a method to restart validation for this validation field with new value of maxLength?

Code: class Account { maxMsgLength = 200; newAccount: FormGroup;

//activated by click on another method
    private changeMaxMsgLength() : void {
    let values = Object.values(this.accountsStorage);
    if(values.includes("oldAccount")) {
      this.maxMsgLength = 150;
    } else {
      this.maxMsgLength = 200;
    }
  }

  ngOnInit(): void {
    this.newAccount = this.formbuilder.group({
      msg         : ['', Validators.maxLength(this.maxMsglength)],
      link        : ['', Validators.pattern('^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$')],
      schedule    : ['', Validators.pattern('^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) (2[0-3]|[01][0-9]):[0-5][0-9]$')]
    });

  }

} 
 //where in template there is 


<div class="form-group">
    <label for="name">Message</label>
    <textarea class="form-control" id="Message" formControlName="msg" style="width: 300px; height: 150px;"></textarea>
</div>
<div class="error" *ngIf="newAccount.get('msg').hasError('maxlength')">
    Maximum of {{maxMsglength}} characters
</div>

• javascript
• validation
• angular

Share Improve this question Follow edited Nov 14, 2016 at 19:59 Daniel Drozdzel asked Nov 14, 2016 at 12:03 Daniel DrozdzelDaniel Drozdzel 15433 silver badges77 bronze badges 1

• Also doesn' work this.newAccount.controls['msg'].updateValueAndValidity(); – Daniel Drozdzel Commented Nov 14, 2016 at 20:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can use maxlength attribute of your html input for it :

<input [attr.maxlength]="maxMsgLength" />

Found out the answer! :D, need to use method setValidators from AbstractControl:

  newAccount.controls['msg'].setValidators(Validators.maxLengt‌h(this.maxMsglength)‌​)

Method overites previous validator and set new with updated maxMsgLenth value