Question

我有一个动态的formControl，其中component.ts文件中的addControl如下：

//...
this.reportList = this.data.reportList; 
for (let i = 0; i < this.reportList.length; i++) {
    const key = this.reportList[i].quesId+'';
    this.afterActionReportForm.addControl(key, new FormControl(this.reportList[i].boardAnswers));
}
...///

我的component.html文件代码如下：

<div  class="row" *ngIf="reportList && reportList.length > 0" style="padding:10px;">
    <div *ngFor="let e of reportList; let i = index" class="col-sm-6" style="margin-top: 2em;">
        {{i+1}}. {{e.question}}
        <textarea style="width:100%" #{{e.quesId}} rows="8" cols="75" maxlength="500" formControlName="{{e.quesId}}"
        class="form-control"  pInputTextArea ></textarea>
        <span> {{e.boardAnswers.length}} of 500 characters</span>
    </div>
</div>

显示部分工作正常。但是该范围具有一个即刻计算的id并根据输入的textArea出现在UI中。

例如显示500个字符中的25个，并且当您继续输入时，计数器必须增加。我能够为我的静态表单执行以下操作：这个以静态形式工作：

<div class="col-sm-10">
    <textarea style="width:80%" #message rows="8" cols="75" maxlength="500" 
    formControlName="message" class="form-control"  pInputTextArea ></textarea>
    <span> {{message.value?.length || 0}} of 500 characters</span>
</div>

但是相同的概念不适用于动态表单。{{e.boardAnswers.length}}仅在页面加载时才为我提供价值，但是当我键入textArea时，它不会递增。我如何处理动态表单。有建议吗？

Answer 1

正在运行的脚本：

app.component.html
<form [formGroup]="afterActionReportForm">
  <div  class="row" *ngIf="reportList && reportList.length > 0" style="padding:10px;">
    <div *ngFor="let e of reportList; let i = index" class="col-sm-6" style="margin-top: 2em;">
        {{i+1}}. {{e.question}}
        <textarea style="width:100%" #{{e.quesId}} rows="8" cols="75" maxlength="500" [formControlName]="e.quesId"
        class="form-control"  pInputTextArea ></textarea>
        <span> {{afterActionReportForm.get(e.quesId.toString()).value.length}} of 500 characters</span>
    </div>
</div>
</form>

app.component.ts

  ngOnInit() {
    this.afterActionReportForm = new FormGroup({});
    this.reportList = this.data.reportList;
    for (let i = 0; i < this.reportList.length; i++) {
        const key = this.reportList[i].quesId+'';
        this.afterActionReportForm.addControl(key, new FormControl(this.reportList[i].boardAnswers));
    }
  }

一种更好的长度计算方法

getStrLength(key: string | number): number {
    return this.afterActionReportForm.get(key.toString()).value?.length || 0;
  }

<span> {{getStrLength(e.quesId)}} of 500 characters</span>

Answer 2

我有同样的要求。我使用了getter方法this.f来获取表单控件。将当前quesId与控件对象的id进行比较，以获取值和长度。这对我有用

HTML

    <form [formGroup]="afterActionReportForm">
    <div  class="row" *ngIf="reportList && reportList.length > 0" style="padding:10px;">
      <div *ngFor="let e of reportList; let i = index" class="col-sm-6" style="margin-top: 2em;">
          {{i+1}}. {{e.question}}
          <textarea style="width:100%" #{{e.quesId}} rows="8" cols="75" maxlength="500"  [formControlName]="e.quesId"
          class="form-control"  pInputTextArea ></textarea>
          <span > {{getMyLength(e.quesId)}} of 500 characters</span>
      </div>
  </div>
  </form>

TS

 get f() { return this.afterActionReportForm.controls; }
 

   getMyLength(id){
    var len;
  Object.entries(this.f).forEach(([key,value]) => {
    if(key === id){
     len= value.value.length;
    }
  });
  return len;
   }

反应形式的动态形式控制-角度

2 个答案: