CODEWITHSUNDEEP
validationangulardatatabledatatemplate
Binal Vekariya
Binal Vekariya

Reputation: 250

How to Apply form validation inside data table in angular2

I am trying to apply required field validation for text-box which is inside data table template.

Required field validation message pop up properly but as there is no form tag i was not able to check form.valid in component.

Please find below code:

 <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>

Any help will be appreciable.

Upvotes: 1

Views: 1966

Answers (1)

Jayakrishnan
Jayakrishnan

Reputation: 4294

Put the datatable element inside the form tag having ngForm. It would fire the form validations. Please see below:

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

Upvotes: 1

Related Questions