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

Question

我想在 Angular 6 中动态创建 3 个输入标签而不是 copy/paste 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 条件中放入什么。如果我的模板引用变量来自数组，我该怎么办？有人有想法吗？

谢谢

Answer 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

在 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

javascript

angular-template

angular-ng-if

ngfor

angular