CODEWITHSUNDEEP
htmlvalidationangular
MMR
MMR

Reputation: 3009

How to perform validations in angular2

I am trying to perform validations to my fileds in such a way that when i click on submit button it must show error to fields which are empty.Can anyone please help me ............. 

<div *ngFor="let detail of details" class="nopadding col-sm-12">

    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="nobottommargin col-sm-12 formpaddingcss" name="template-contactform" novalidate="novalidate">
        <div class="form-process"></div>
        <div class="col_half">
            <label for="template-contactform-name">First Name <small>*</small></label>
            <div class="input-group divcenter">
                <span class="input-group-addon  noradius"><i class="icon-user iconcolorcss"></i></span>
                <input type="email" data-toggle="tooltip" data-placement="top" title="Enter Firstname!" name="widget-subscribe-form-email" class="form-control required email formcontrolheight" [formControl]="form.controls['firstname']" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true">
            </div>
        </div>


        <div class="clear"></div>
        <div class="col_full">
            <button class="button button-blue button-mini bottommargin-sm pull-right text-right" type="submit">Save</button>
        </div>
        <div class="clear"></div>
</div>

Upvotes: 1

Views: 79

Answers (2)

mayur
mayur

Reputation: 3618

Try this for simple validations.... 

     <input type="email" title="Enter Firstname!" class="form-control required email formcontrolheight" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true">
        <span *ngIf="clicked && !detail.firstname || !detail.firstname.trim()" class="error">Error Its empty</span>

       <button (click)="clicked =  true"></button>

Upvotes: 1

rohit raut
rohit raut

Reputation: 53

I don't its correct or not but this works fine with me. Refer this code:

<form id="discussion_form" name="discussion_form" ng-submit="addDiscussion(discussion_form.$valid)" novalidate>
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label for="dis_title">Topic<span>*</span></label>
            <input type="text" id="dis_title" class="form-control" name="dis_title" placeholder="e.g., about independence day celebration." required ng-model="discussionDetails.dis_title">
            <label for="dis_title" class="form_errors" ng-show="discussion_form.dis_title.$invalid && !discussion_form.dis_title.$pristine">Please enter a discussion topic</label><!--To show error msg-->
        </div>
    </div>
</div>
<button type="submit" class="btn btn-primary pull-right" ng-disabled="discussion_form.$invalid">Submit</button>

Upvotes: 0

Related Questions