How to Apply form validation inside data table in angular2

Question

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.

You can apply form validation attributes to the data-table tag too. You do not need explicit from element. — serkan
– serkan, Commented Jan 2, 2017 at 7:25
@serkandemirel0420 can you please be more specific by showing few lines of code? i am not able to understand — Binal Vekariya
– Binal Vekariya, Commented Jan 2, 2017 at 7:33

Jayakrishnan · Accepted Answer · 2017-01-03 10:09:13Z

1

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>

answered Jan 3, 2017 at 10:09

Jayakrishnan

4,3043 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Apply form validation inside data table in angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related