Проверка поля Angular Required для динамически генерируемого столбца не работает - PullRequest
0 голосов
/ 11 июля 2019

У меня есть динамически сгенерированная таблица в 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...