如何在 angular 9+ 中動態設置三個輸入字段的組合最大長度

Question

我想為 angular 中的三個輸入字段設置 1400 的組合最大長度，因此如果說用戶在第一個字段中輸入 400 個字符，則在第二個和第三個字段中最大長度變為 1000。

我在 StackOverflow 上找到了一個答案，但那是針對 angularjs 的，即使我遵循了也無法正常工作，所以請給我 angular 9 種解決方案，嘗試在 4 天內解決此問題

目前進展...

文件

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 文件

<form [formGroup]="wrapReportForm" class="wrap_form">

        <div class="wrap_input">

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

          <label class="label-required" 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 class="wrap_input">

          <label class="label-required">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 class="wrap_input">

          <label class="label-required">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 class="wrapReport_buttons">

          <button class="margin-right-sm outline" mat-dialog-close >Cancel</button>

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

        </div>

      </form>

Answer 1

創建一個自定義驗證器來檢查 3 個控件的最大長度並將其設置在表單上。

Answer 2

找到解決方案

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) 
}