How to set a combined maxlength of three input fielsd in angular 9 dynamically-CodePudding

I'm wanting to set a combined maximum length of 1400 for three input fields in angular, so if say that for the first field the user enters 400 characters, in the second and third fields the maxlength becomes 1000.

I have found one answer at StackOverflow but that is for angularjs and not working even if I follow so please give me angular 9 solution trying to solve this issue for 4days now

progress so far...

TS file

getMaxLength(val): void{
    this.remaining = this.MAX_LENGTH - (
    this.summary.nativeElement.value.length   
    this.insights.nativeElement.value.length   
    this.recommendations.nativeElement.value.length
    );
    this.summaryLimit = this.MAX_LENGTH - (this.summary.nativeElement.value.length)
    this.insightLimit = this.MAX_LENGTH - (this.insights.nativeElement.value.length)
    this.recommLimit = this.MAX_LENGTH - (this.recommendations.nativeElement.value.length) 
  }

html file

<form [formGroup]="wrapReportForm" >

        <div >

          <span>{{remaining}}</span>

          <label  for="summary"

            >Summary </label

          >

          <textarea

            formControlName="summary"

            #summary

            type="text"

            maxlength="{{summaryLimit}}"

            (ngChange)="getMaxLength($event)"

            name="summary"

            placeholder="Enter some input"

            wrap="soft"

          ></textarea>

          <!-- (keydown)="getMaxLength($event, summary.value?.lead)" -->

          <!-- <span>{{ summary.value?.length || 0 }}/{{maxLength1}}</span> -->

        </div>

        <div >

          <label >Insights </label>

          <textarea

            formControlName="insights"

            type="text"

            name="insights"

            #insights

            maxlength="{{insightLimit}}"

            (ngModelChange)="getMaxLength($event)"

            placeholder="Enter some input"

          ></textarea>

          <!-- <span>{{ insights.value?.length || 0 }}/{{maxLength2}}</span> -->

        </div> 
<div >

          <label >Recommendations </label>

          <textarea

            formControlName="recommendations"

            type="text"

            name="recommendations"

            #recommendations

            maxlength="{{recommLimit}}"

            (ngModelChange)="getMaxLength($event)"

            placeholder="Enter some input"

          ></textarea>

          <!-- (keydown)="getMaxLength($event, recommendations.value?.length)" -->

          <!-- <span>{{ recommendations.value?.length || 0 }}/{{maxLength3}}</span> -->

        </div>

        <div >

          <button  mat-dialog-close >Cancel</button>

          <button  (click)="generateWrapReport(true)" mat-dialog-close>Send Request</button>

        </div>

      </form>

CodePudding user response：

Create a custom validator to check the maxlength of the 3 controls and set it on the form.

CodePudding user response：

Found the solution

getMaxLength(val): void{ 

this.remaining = this.MAX_LENGTH - ( this.summary.nativeElement.value.length   this.insights.nativeElement.value.length   this.recommendations.nativeElement.value.length ); 

this.summaryLimit = this.MAX_LENGTH - (this.insights.nativeElement.value.length this.recommendations.nativeElement.value.length ) 

this.insightLimit = this.MAX_LENGTH - (this.summary.nativeElement.value.length   this.recommendations.nativeElement.value.length) 

this.recommLimit = this.MAX_LENGTH - (this.summary.nativeElement.value.length   this.insights.nativeElement.value.length) 
}