0

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!

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
Pacuraru Daniel
  • 1,207
  • 9
  • 30
  • 56

0 Answers0