Not able to add validations to the elements in my form - angularjs

Question

I want to add validations to all the elements in the form. the error message should be displayed below the elements when the text of the control changes.
Following is my code:
<div role="tabpanel" class="tab-pane active" id="step-1">
<div class="col-md-4">
<div> <img src="../logo.jpg"
alt="Smiley face"
height="150"
style="margin:40px;"
width="150">
</div>
</div>
<div class="col-md-7">
<form action="r" name="regform"
method="post" >
<div class="col-md-6">
<div class="col-md-6" style="padding:0px;" >
<label for="mType" >Member Type*</label> <br />
<select id="member" ng-model="inputForm.mType" style="height:35px;width:135px;">
<option value="owner">Owner</option>
<option value="agent">Agent</option>
<option value="agent">Customer</option>
</select>
</div>
<div class="form-group">
<div class="col-md-6" style="padding:0px;" >
<label for="gender" >Gender </label> <br />
<select id="gender" ng-model="inputForm.gender" style="height:35px;width:135px;">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<label for=''>First Name</label>
<input type='name'
name='fName'
ng-model="inputForm.fName"
ng-minlength="1"
ng-maxlength="25"
ng-pattern="/^[A-Za-z]+$/"
required
/>
<span ng-show="regform.fName.$error.pattern">Please enter valid number!</span>
<!-- <span ng-show="studentForm.firstName.$touched && studentForm.firstName.$error.required">First name is required.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span>-->
</div>
<div class="form-group">
<label>Last Name : </label>
<input type="text"
name="lName"
class="form-control input-lg"
placeholder="Last Name"
ng-model="inputForm.lName"
style="height:35px">
</input>
</div>
<div class="form-group">
<label for="DOB">Date of Birth :</label>
<input type="date"
id="dob"
class="form-control input-lg"
placeholder="Date Of Birth (mm/dd/yyyy)"
ng-model="inputForm.dob"
style="height:35px;">
</input>
</div>
<div class="form-group">
<label>Adhar Number:</label>
<input type="text" id="adhar"
class="form-control input-lg"
placeholder="Adhar Number"
ng-model="inputForm.adhar"
style="height:35px">
</input>
</div>
<div class="form-group">
<label>PAN Number :</label>
<input type="text" id="pan"
class="form-control input-lg"
placeholder="PAN Number"
ng-model="inputForm.pan"
style="height:35px">
</input>
</div>
<div class="form-group">
<label>Email Address :</label>
<input type="email" id="email"
class="form-control input-lg"
placeholder="Your Email"
ng-model="inputForm.email"
style="height:35px">
</input>
<!-- <span ng-show="studentForm.email.$touched && studentForm.email.$error.email">Please enter valid email id.</span>-->
</div>
</div>
<div class="col-md-5" >
<div class="full-width bg-transparent">
<div class="full-width">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="custom-form">
<div class="text-center bg-form">
<div class="img-section">
<img src="http://lorempixel.com/200/200/nature/"
class="imgCircle"
alt="Profile picture">
<span class="fake-icon-edit"
id="PicUpload"
style="color: #ffffff;">
<span class="glyphicon glyphicon-camera camera"></span>
</span>
<div class="col-lg-12">
<h4 class="text-right col-lg-12" style="color:balck;">
<span class="glyphicon glyphicon-edit"></span> Edit Profile
</h4>
<input type="checkbox" class="form-control" id="checker"></input>
</div>
</div>
<input type="file"
id="image-input"
onchange="readURL(this);"
accept="image/*"
disabled class="form-control form-input Profile-input-file" >
</input>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8" >
<hr class="colorgraph" style="height: 5px;
border-top: 0;
background: #62c2e4;
border-radius: 5px;">
<div class="col-xs-4 col-xs-offset-3">
<a ui-sref="form.account" class="btn btn-lg btn-primary btn-block signup-btn"
style=" height:35px;
margin-bottom:10px;
padding:0px;" >
Next <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
</form>
</div>
</div>
image for reference
Please give suggestions to change the code so that appropriate error messages will be displayed to the controls after validating the input entr the user.

Answer 1

Your question is a bit vague as we can do what you are asking in many ways but find below an example using Bootstrap :
<form name="search" class="form-horizontal">
<div class="form-group col-md-2 required" ng-class="{
'has-feedback': (search.$submitted && search.carrier.$invalid),
'has-error': (search.$submitted && search.carrier.$invalid)}">
<label class="control-label" for="carrier">Carrier Code:</label>
<input type="text" class="form-control"
id="carrier" name="carrier"
required
pattern="[a-zA-Z0-9-]{2,3}"
maxlength="3"
ng-model="myAngularCtrl.flightDetails.carrier"/>
<span ng-show="search.$submitted && search.carrier.$error.required" class="field_errormsg-below">The Carrier Code is Mandatory</span>
<span ng-show="search.$submitted && search.carrier.$error.pattern" class="field_errormsg-below">use only numbers, digit and -</span>
</div>
<button type="submit"
class="btn btn-default FHU_margin-top-20"
ng-click="myAngularCtrl.searchFlight(search)">
Submit
</button>
</form>
You have a few things here:
The form has a name: search
You see two kind of error message being displayed. For them to be displayed, the user needs to have tried to submit the form (search.$submitted) and the field carrier needs to be in error (search.carrier.$error.required or search.carrier.$error.pattern)