У меня есть динамически сгенерированная таблица в Angular 7, и я пытаюсь сделать kendo-dropdownlist
в качестве обязательного поля.Я попытался установить ссылочную переменную и отключить кнопку, если форма недействительна.По какой-то причине я получаю эту ошибку:
Если в теге формы используется ngModel, либо должен быть установлен атрибут имени, либо элемент управления формы должен быть определен как «автономный» в ngModelOptions.
Пример 1: <input [(ngModel)]="person.firstName" name="first">
Пример 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
Я не уверен, почему я получаю эту ошибку, поскольку я установил name="select{{i}}" #name="ngModel"
, требуемый вразметка kendodropdown
<div class="center" class="file-upload-wrapper">
<form #myForm="ngForm">
<ngx-file-drop dropZoneLabel="Drop files here" dropZoneClassName="file-drop" multiple="true"
(onFileDrop)="dropped($event)" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
<button type="button" (click)="openFileSelector()">Drop Files to Upload</button>
</ng-template>
</ngx-file-drop>
<div class="upload-table">
<table id="table1" class="center">
<tbody class="upload-name-style">
<tr *ngIf="files.length > 0">
<td class="label" style="width: 350px">
Document Name
</td>
<td class="label" style="width: 200px">
Document Type
</td>
<td class="label" style="width: 200px">
Document Date
</td>
</tr>
<tr *ngFor="let item of files; let i=index">
<td> <input kendoTextBox [(ngModel)]="item.name" style="width: 350px" /></td>
<td>
<kendo-dropdownlist style="width:350px" [(ngModel)]="item.selectedDocumentItem" name="select{{i}}" #name="ngModel" required
[data]="DocumentTypes" [filterable]="false" textField="Name" valueField="Id">
</kendo-dropdownlist>
</td>
<td>
<kendo-datepicker style="width: 200px" [format]="'dd MMM, yyyy'" [value]="item.selectedDate"
[(ngModel)]="item.selectedDate"></kendo-datepicker>
</td>
<td> <button class="btn btn-default" [disabled]="myForm.invalid" (click)="deleteRow(i)"><i class="fa fa-trash"></i>Delete
</button></td>
</tr>
</tbody>
</table>
<!-- <span *ngIf="name.invalid">*</span> -->
</div>
</form>
</div>
У меня есть рабочий пример в stackblitz, но он не работает в моем приложении
https://stackblitz.com/edit/angular-ufkcvk-v2cyrl