I am trying to create a form in Angular 6 which has a list of YouTube links and the type. I have an *ngFor
to create the list of input fields but i cannot add validation to them.
<div *ngFor="let link of links; let i = index;">
<label [ngClass]="{ 'invalid': videoUrl.touched && videoUrl.invalid }">
<i class="icon-youtube"></i>
<input
type="text"
name="video-url"
#videoUrl="ngModel"
placeholder="Paste YouTube video link here"
[(ngModel)]="link.url"
required
pattern="[0-9]+">
</label>
<ul class="validation">
<li *ngIf="videoUrl.errors.required">
This field is required, please paste a valid video link.
</li>
<li *ngIf="videoUrl.errors.pattern">
Video link is invalid, check the link again and retry.
</li>
</ul>
</div>
Since the fields are inside an *ngFor
i don't know how to create the #videoUrl
reference an array.
Thank you in advance, Daniel!