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

时间:2017-01-02 07:21:23

标签: validation angular datatable datatemplate

我正在尝试对数据表模板内的文本框应用必需的字段验证。

必填字段验证消息正确弹出,但由于没有表单标记,我无法检查组件中的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>

任何帮助都会很明显。

1 个答案:

答案 0 :(得分:1)

将datatable元素放在具有ngForm的form标记内。它会触发表单验证。 请参阅以下内容:

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