angle2のデータテーブル内でフォームの検証を適用する方法

Question

データテーブルテンプレート内にあるテキストボックスに必要なフィールド検証を適用しようとしています。

必須のフィールド検証メッセージが正しくポップアップ表示されますが、フォームタグがないため、コンポーネントの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タグ内にdatatable要素を配置します。フォームのバリデーションが実行されます。

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