我正在尝试在Angular 6中创建一个包含YouTube链接和类型列表的表单。我有一个*ngFor
来创建输入字段的列表,但是我无法对其进行验证。
<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>
由于字段位于*ngFor
内部,因此我不知道如何创建#videoUrl
引用数组。
丹尼尔,谢谢你!