Не могу связать ngModel с именем динамически - PullRequest
0 голосов
/ 11 февраля 2019

Для динамического создания списка элементов ввода и отображения ошибки, если ввод неправильный или грязный.

<mat-list *ngFor ="let vehicle of vehicleList; let i = index;">
    <mat-list-item class="row">
        <span class="col-md-1">{{i + 1}}</span>
        <input pattern="{{vehiclePattern}}" type="text" [(ngModel)]="vehicle.vehicle_number"
               name="vehicle{{i}}" #vehicle="ngModel"/>
        <div *ngIf="(vehicle + i).invalid && ((vehicle + i).dirty)" class="alert alert-danger">
            <div *ngIf="(vehicle + i).errors.pattern">
                Enter a valid Vehicle
           </div>
       </div>
    </mat-list-item>
</mat-list>

Итак, я хочу какое-то решение, генерирующее следующий код:

<input pattern="{{vehiclePattern}}" type="text" [(ngModel)]="vehicle.vehicle_number"
           name="vehicle0" #vehicle0="ngModel"/>
     <div *ngIf="vehicle0.invalid && (vehicle0.dirty)" class="alert alert-danger">
        <div *ngIf="vehicle0.errors.pattern">
            Enter a valid Vehicle
        </div>
   </div>


<input pattern="{{vehiclePattern}}" type="text" [(ngModel)]="vehicle.vehicle_number"
           name="vehicle1" #vehicle1="ngModel"/>
   <div *ngIf="vehicle1.invalid && (vehicle1.dirty)" class="alert alert-danger">
        <div *ngIf="vehicle1.errors.pattern">
            Enter a valid Vehicle
        </div>
   </div>
...