Question

我在Angular 7中有一个动态生成的表，并且试图将kendo-dropdownlist设置为必填字段。我试图设置一个引用变量，如果表单无效，则禁用按钮。因为某些原因我收到此错误：

如果在表单标签中使用ngModel，则必须使用name属性设置或必须将表单控件定义为“独立” ngModelOptions。

示例1：<input [(ngModel)]="person.firstName" name="first">

示例2：<input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

我不确定为什么会出现此错误，因为我在kendodropdown标记中设置了name="select{{i}}" #name="ngModel"必需

<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

Angular Required字段验证不适用于动态生成的列

0 个答案: