Для динамического создания списка элементов ввода и отображения ошибки, если ввод неправильный или грязный.
<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>