在 Angular 6 中使用 ngFor 循环动态创建输入元素数组并添加基于模板引用变量的动态验证答案

【问题标题】：use ngFor loop in Angular 6 to dynamically create array of input elements and add dynamical validation based on template reference variables在 Angular 6 中使用 ngFor 循环动态创建输入元素数组并添加基于模板引用变量的动态验证
【发布时间】：2019-03-05 11:06:45
【问题描述】：

我想在 Angular 6 中动态创建 3 个输入标签，而不是复制/粘贴 html 代码，因为输入元素具有相似的 html 和功能。

为此，我在组件内部创建了一个数组“reusableItems”并对其进行了初始化：

    let numberOfInputElements = 3;        
    for (let i = 0; i < numberOfInputElements; i++) {          
      this.reusableItems.push({
        answer: 'Answer ' + (i +1),
        passwordRecoveryAnswer: this.user['passwordRecoveryAnswer' + (i + 1)]
      });
    }

然后我将代码放入我的 html 中：

<div *ngFor="let item of dropDownDataManagerService.reusableItems" >
  <li class="col-xs-12 pl-lg pr0 pv-sm bd1-bottom">
    <div class="col-xs-4 ph0 pt"> {{item.answerTitle}}</div>
    <div class="col-xs-8">
      <input type="text" name={{item.answer}} ref-{{item.answer}}="ngModel" class="col-sm-12 k-textbox ph0"
             [(ngModel)]=item.passwordRecoveryAnswer
             [pattern]="[a-z]"
             required autocomplete="off"/>

    </div>
  </li>
</div>

看起来工作正常，但是当这些字段为空且与模式不匹配时，我需要添加错误消息。类似的东西：

<div *ngIf="__{{item.answer}}__.errors?.required ">
  {{'Please provide an answer' | translate}}
</div>
<div *ngIf="__{{item.answer}}__.errors?.pattern">
  {{'Pattern is not match'}}
</div>

我不知道应该在 ngIf 条件中放入什么。如果我的模板引用变量来自数组，我该怎么做？有人有想法吗？

谢谢

【问题讨论】：

标签： javascript angular ngfor angular-ng-if angular-template

【解决方案1】：

Angular 为每个嵌入的模板创建唯一的模板引用变量，以便您可以在 ngFor 循环中使用相同的模板引用变量名称：

<div *ngFor="let item of reusableItems">
    <li class="col-xs-12 pl-lg pr0 pv-sm bd1-bottom">
        <div class="col-xs-4 ph0 pt"> {{item.answerTitle}}</div>
        <div class="col-xs-8">
            <input type="text" name={{item.answer}} ref-answer="ngModel" class="col-sm-12 k-textbox ph0" [(ngModel)]="item.passwordRecoveryAnswer"
             [pattern]="'[a-z]'" required autocomplete="off" />
            <div *ngIf="answer.errors?.required">
                {{'Please provide an answer'}}
            </div>
            <div *ngIf="answer.errors?.pattern">
                {{'Pattern is not match'}}
            </div>
        </div>
    </li>
</div>

在上面的代码中，我为数组中的每个输入使用相同的名称

ref-answer="ngModel" // or you can also use #answer="ngModel

【讨论】：