используйте цикл ngFor в Angular 6 для динамического создания массива входных элементов и добавления динамической проверки на основе ссылочных переменных шаблона - PullRequest
Новая
       21

используйте цикл ngFor в Angular 6 для динамического создания массива входных элементов и добавления динамической проверки на основе ссылочных переменных шаблона

0 голосов
/ 29 сентября 2018

Я хотел бы динамически создавать 3 входных тега в Angular 6, чтобы не копировать / вставлять 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.Как я могу это сделать, если мои переменные ссылки на шаблон взяты из массива?У кого-нибудь есть идеи?

Спасибо

1 Ответ

0 голосов
/ 30 сентября 2018

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
...