如何在angular2中的数据table中应用表单验证

Question

我正在尝试对数据 table 模板中的文本框应用必填字段验证。

正确弹出必填字段验证消息，但由于没有表单标记，我无法在组件中检查 form.valid。

请查找以下代码：

 <data-table  id="user-grid"(reload)="reloadItems($event) [items]="userData">

     <data-table-column [header]="'UserName'">
          <template #dataTableCell let-item="item">
              <span> 
                <input type="text" [(ngModel)]="item.UserName" class="form-control" required #UserName="ngModel" name="UserName"/>

                <span class="text-danger" *ngIf="(UserName.errors != null && UserName.errors.required && (UserName.dirty))">
                    Please enter user name.
                </span>
              </span>                 
          </template>
     </data-table-column>
     <data-table-column [header]="'Action'" >
        <template #dataTableCell let-item="item">                                       
           <a title="Save" (click)="save(item)" class="btn green btn-sm">                                           
           </a>                                        
         </template>
     </data-table-column>

   </data-table>

任何帮助都将不胜感激。

Answer 1

将数据表元素放入具有 ngForm 的表单标签中。它会触发表单验证。请看下面：

<form #testform="ngForm">
     <data-table>
     </data-table>
</form>

如何在angular2中的数据table中应用表单验证

How to Apply form validation inside data table in angular2

validation

datatable

datatemplate

angular