AngularJs Form validation when select radio buttons - angularjs

Hi i am learner in angularJS and in my form i have name and email fields and one radio group for gender selection and my requirement is when i select male then name field is required and if i select female then email field is required
I have tried below code but its not working can some one help me please
code:
<form class="form-horizontal alert alert-warning" name="empList" id="empForm" ng-submit="insertInfo(empInfo)">
<h3 class="text-center">Insert Employee Details Into Database</h3>
<div class="form-group">
<label for="Name">Employee Name:</label>
<input type="text" name="emp_name" class="form-control" placeholder="Enter Employee Name" ng-model="empInfo.name"
required="gender.value=='male'" />
</div>
<div class="form-group">
<p class="text-danger" ng-show="empList.emp_name.$invalid">Name field is Empty!</p>
</div>
<div class="form-group">
<label for="Email">Email Address:</label>
<input type="email" name="emp_email" class="form-control" placeholder="Enter Employee Email Address" ng-model="empInfo.email"
autofocus required="gender.value=='female'"/>
</div>
<div class="form-group">
<p class="text-danger" ng-show="empList.emp_email.$invalid>Invalid Email!</p>
</div>
<div class="form-group">
<label for="Gender">Gender:</label>
<label for="" class="radio-inline gender">
<input type="radio" name="emp_gender" value="male" ng-model="empInfo.gender" #gender="ng-model">Male
</label>
<label for="" class="radio-inline gender">
<input type="radio" name="emp_gender" value="female" ng-model="empInfo.gender" #gender="ng-model">Female
</label>
</div>
</form>


Maybe try with that validation:
HTML :
<form class="form-horizontal alert alert-warning" name="empList" id="empForm" ng-submit="insertInfo(empInfo)">
<h3 class="text-center">Insert Employee Details Into Database</h3>
<div class="form-group">
<label for="Name" ng-show="empInfo.gender != male_value">Employee Name is required</label>
<input type="text" name="emp_name" class="form-control" placeholder="Enter Employee Name" ng-model="empInfo.name"
required="gender.value=='male'" />
</div>
<div class="form-group">
<p class="text-danger" ng-show="empList.emp_name.$invalid">Name field is Empty!</p>
</div>
<div class="form-group">
<label for="Email" ng-show="empInfo.gender == male_value">Email Address is rquired</label>
<input type="email" name="emp_email" class="form-control" placeholder="Enter Employee Email Address" ng-model="empInfo.email"
required="gender.value=='female'"/>
</div>
<div class="form-group">
<p class="text-danger" ng-show="empList.emp_email.$invalid">Invalid Email!</p>
</div>
<div class="form-group">
<label for="Gender">Gender:</label>
<label for="" class="radio-inline gender">
<input type="radio" name="emp_gender" ng-value="male_value" ng-model="empInfo.gender">Male
</label>
<label for="" class="radio-inline gender">
<input type="radio" name="emp_gender" ng-value="female" ng-model="empInfo.gender" >Female
</label>
</div>
</form>
JS:
$scope.male_value = 'male';
plunker: http://plnkr.co/edit/Hi5t1gU5TIdNx670wHo1?p=preview

Related

AngularJS Form Validation and Submit

Codepen link: http://codepen.io/anon/pen/mVyPaw
Need to create an angular app (w/ 1 controller) that validates that this form has all three fields filled out & Submit button can only be enabled if the form is valid. Don't need to use the preprocessors.
<div class="container" ng-app="myApp" ng-controller="formCtrl">
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="form" id="contact-form">
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName">
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName">
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }">
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-model="submitButton">Submit</button>
</form>
</div>

Actually it's module inject problem. ng-app="myApp" ng-controller="formCtrl" Where is your myApp module code.
try like this.
<div class="container" ng-app>
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="form" id="contact-form" novalidate>
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required>
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-disabled="form.$invalid">Submit</button>
</form>
</div>

Add required validation
<div class="container" ng-app="myApp" ng-controller="formCtrl">
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="myForm" id="contact-form">
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required >
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-model="submitButton" data-ng-disabled="myForm.$invalid" >Submit</button>
</form>
</div>
Here is your edited CodePen

Custom Form Validation Not working in angularjs

I want to validate all the fields in this form by angular, but it is not working. I am new to angular and cant find what the problem is. None of the field in this form is being validated
<form class="form-horizontal" role="form" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group" ng-class="{'has-error': commentForm.name.$error.required && !commentForm.name.$pristine}">
<label for="name" class="col-xs-2">Your Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author">
<span class="help-block" ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">Your Name is Required</span>
</div>
</div>
<div class="form-group">
<label for="rating" class="col-xs-2">Number of Stars</label>
<div class="col-xs-10">
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="1" ng-model="dishComment.rating"> 1
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="2" ng-model="dishComment.rating"> 2
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="3" ng-model="dishComment.rating"> 3
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="4" ng-model="dishComment.rating"> 4
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="5" ng-model="dishComment.rating"> 5
</label>
</div>
</div>
<div class="form-group" class="{'has-error': commentForm.comments.$error.required && !commentForm.comments.$pristine}">
<label for="comments" class="col-xs-2">Your comments</label>
<div class="col-xs-10">
<textarea class="form-control" id="comments" name="comments" rows="12" ng-model="dishComment.comment"></textarea>
<span class="help-block" ng-show="commentForm.comments.$error.required && !commentForm.comments.$pristine">Please Write a comment</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit Comment</button>
</div>
</div>
</form>

I think you only missed required in input element.
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author" required>
I just added required for one input element and its working.
Please check jsfiddle

I am using input fields, something like below structure. as Nitish said, you must need to write required in input element.
AppForm is a form name.
<md-input-container flex="50" flex-gt-xs="33" md-is-error="AppForm.txtApplicationUrl.$invalid && (AppForm.$submitted || AppForm.txtApplicationUrl.$dirty)">
<label for="input_0">Your label</label>
<input type="text" ng-model="applicationDetails.Applicationurl" name="txtApplicationUrl" tabindex="0" id="txtApplicationUrl" aria-invalid="false" required><div class="md-errors-spacer"></div>
<div ng-messages="AppForm.txtApplicationUrl.$error" ng-if="AppForm.$submitted || AppForm.txtApplicationUrl.$touched">
<div ng-message="required">Custom Message</div>
</div>
</md-input-container>

Chrome is auto filling a form with the wrong data

I have a form on my register page that allows a user to create their account. If the create account request is successful my angular redirects the user to the login view. When the user lands here it auto fills the username/email field with the last name from the previous form.
I am not quite sure why though. The forms both have the same id's and name values so I am very confused on the chrome auto-filling.
Found something out, after registering an account the user is redirected to the login page. It auto fills the lastname into the username box then populates the password correctly. However if you clear the lastname out and login using the proper credentials it updates that Google Save Locker record and from that point on works correctly.
Here are visual examples of what I am seeing.
Registration:
Filling out form so you can see the last name value
Getting redirected to login page after registration:
The UI chrome displays after landing on login page
Link to page for live example:
Website link : app.baileysproject.com
Register form:
<form class="form-horizontal" id="RegisterForm">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Email">Email</label>
<div class="col-md-4">
<input id="Email" name="Email" type="email" placeholder="Email Address" class="form-control input-md" ng-model="stuff.Email" required="">
<span class="help-block">A valid email address</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="FirstName">First Name</label>
<div class="col-md-4">
<input id="FirstName" name="FirstName" type="text" placeholder="First Name" class="form-control input-md" ng-model="stuff.FirstName" required="">
<span class="help-block">Your first name</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="LastName">Last Name</label>
<div class="col-md-4">
<input id="LastName" name="LastName" type="text" placeholder="Last Name" class="form-control input-md" ng-model="stuff.LastName" required="">
<span class="help-block">Your last name</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Password">Password</label>
<div class="col-md-4">
<input id="Password" name="Password" type="password" placeholder="Password" class="form-control input-md" ng-match="stuff.Password" ng-model="stuff.Password" required="">
<span class="help-block">Enter a strong password</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="cPassword">Confirm Password</label>
<div class="col-md-4">
<input id="cPassword" name="cPassword" type="password" placeholder="Password" class="form-control input-md" ng-model="stuff.ConfirmPassword" required="">
<span class="help-block">Enter the same password again</span>
</div>
</div>
<!-- Button -->
<div class="form-actions">
<div class="">
<button id="CreateAccount" name="CreateAccount" ng-click="CreateAccount()" class="btn btn-info">{{AccountCreatedValue}}</button>
</div>
</div>
</fieldset>
</form>
Login form:
<form class="form-horizontal">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Email">Email</label>
<div class="col-md-4">
<input id="Email" name="Email" type="email" placeholder="Email Address" class="form-control input-md" ng-model="Email" required="">
<span class="help-block">A valid email address</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Password">Password</label>
<div class="col-md-4">
<input id="Password" name="Password" type="password" placeholder="Password" class="form-control input-md" ng-model="Password" required="">
<span class="help-block">Strong Password</span>
</div>
</div>
<!-- Button -->
<div class="form-actions">
<div class="">
<button id="Login" name="Login" ng-click="Login()" class="btn btn-info">Login</button>
</div>
</div>
</fieldset>
</form>

Form Closing Tag Not Showing In Console

its very strange that i am closing the form input field tags but even though i didn’t find it in console.even my form value didn't getting posted.
here is my code
<form ng-submit="updatepersonel()" ng-repeat="update in userDetail">
<div class="form-group">
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.firstname" />
<label for="exampleInputPassword1">First Name</label>
<div class="form-group">
<label for="exampleInputPassword1">Last Name</label>
<input type="text" class="form-control" ng-model="perupdate.lastname" ng-value="update.lastname" />
</div>
<div class="form-group" />
<label for="exampleInputPassword1">Phone</label>
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.phone" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Location</label>
<input type="text" class="form-control full" ng-model="perupdate.location" ng-value="update.location" />
</div>
<button class="btn btn-success" type="submit">Update</button>
</form>
Edited::
<div class="form-group">
<form ng-submit="updatepersonel()" ng-repeat="update in userDetail">
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.firstname" />
<label for="exampleInputPassword1">First Name</label>
<div class="form-group">
<label for="exampleInputPassword1">Last Name</label>
<input type="text" class="form-control" ng-model="perupdate.lastname" ng-value="update.lastname" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Phone</label>
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.phone" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Location</label>
<input type="text" class="form-control full" ng-model="perupdate.location" ng-value="update.location" />
</div>
<button class="btn btn-success" type="submit">Update</button>
</form>
</div>

i have solved my issue.
what i was doing i was trying to get the data in ng-value.
But when i try to bind data in my ng-model i get the solution
js
$scope.perupdate= {
firstname: key.firstname,
lastname : key.lastname,
phone : key.phone,
location : key.location,
};
view
<input type="text" class="form-control full" ng-model="perupdate.firstname">

Angular ng-click : Only want user to click once not multiple times on a rating system

Objective : Only want user to click once not multiple times on a rating system
<div class="votingButton" ng-click="upVoteOrder(order)">
</div>
is this easily achievable on the html or the controller ?

Have a scope variable to check if the Vote button is clicked..! if once clicked update the scope variable so that it gets disabled. The scope variable can be an attribute in the user model so that it carries ahead.

Try this:
<button class="votingButton" ng-click="upVoteOrder(order)" ng-disabled="buttonClicked"></button>
and inside the upVoteOrder function add:
$scope.buttonClicked = true;

A simple way is to add key and value to the order object in the controller. <button type="button" ng-click="upVoteOrder(order)">vote up</button>
///ctrl.js
$scope.upVoteOrder = function (order) {
var voted = true;
var votedValue = 'Up vote complete!';
order.voted = voted;
order.votedValue = votedValue;
}
if order.voted is true disabled the button
<!-- index.html -->
<div>
<button type="button" ng-click="upVoteOrder(order)" ng-disabled="order.voted">vote up</button>
<p ng-if="order.voted">{{ order.votedValue }}. Thank you for voting!</p>
</div>

You can use us ng-if to hide the html altogether once a click is registered. That way, you don't need to create a button to benefit from what ng-disabled does. The Angular 2 way of doing it is:
<div *ngIf="upVoted(order)"...
Use a function that returns true for index value of your *ngFor loop.

<div class="container ">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form #ref="ngForm" (ngSubmit)="addfirst(ref3.value)">
<!-- GENERAL -->
<div *ngIf="!b"> <h3 class="text-primary">GENERAL</h3>
<div class="form-group">
<label>EMP NUMBER</label>
<input type="number" class="form-control round3 " id="empno" placeholder=" Emp Number"
name="empnober" ngModel #ref1="ngModel" required>
<label *ngIf="ref1.invalid && ref1.touched ">
<div class="text-danger"> *emp num field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> FIRST NAME</label>
<input type="text" class="form-control round3 " id="firstname" placeholder="FIRST NAME" name="firstname"
ngModel #ref2="ngModel" required>
<label *ngIf="ref2.invalid && (ref2.dirty || ref2.touched )">
<div class="text-danger"> *firstname field is mandatory </div>
</label>
</div>
<div class="form-group">
<div class="LAST NAME">
<label>LAST NAME </label>
<input type="text" class="form-control round3 " id="lastname" placeholder="LAST NAME " name="lastname" ngModel
#ref3="ngModel" required>
<label *ngIf="ref3.invalid && (ref3.dirty || ref3.touched )">
<div class="text-danger"> *last name field is mandatory </div>
</label>
</div>
</div>
<div class="form-group">
<label> MIDDLE NAME </label>
<input type="text" class="form-control round3 " id="middlename" placeholder="MIDDLE NAME " name="middlename" ngModel
#ref4="ngModel" required>
<label *ngIf="ref4.invalid && (ref4.dirty || ref4.touched )">
<div class="text-danger"> *middle name field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> ADDRESS </label>
<input type="text" class="form-control round3 " id="address" placeholder="ADDRESS" name="address" ngModel
#ref5="ngModel" required>
<label *ngIf="ref5.invalid && (ref5.dirty || ref5.touched )">
<div class="text-danger"> *address field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> ADDRESS 2 </label>
<input type="text" class="form-control round3 " id="address2" placeholder="ADDRESS 2" name="address2" ngModel
#ref6="ngModel" required>
<label *ngIf="ref6.invalid && (ref6.dirty || ref6.touched )">
<div class="text-danger"> *address2 field is mandatory </div>
</label>
</div>
<!-- <div class="text-right">
Next »
</div> -->
<div >
<div class="form-group">
<label> POST CODE </label>
<input type="number" class="form-control round3 " id="postcode" placeholder=" POSTCODE " name="postcode" ngModel
#ref7="ngModel" required>
<label *ngIf="ref7.invalid && (ref7.dirty || ref7.touched )">
<div class="text-danger"> *postcode field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> CITY </label>
<input type="text" class="form-control round3 " id="city" placeholder="CITY " name="city" ngModel
#ref8="ngModel" required>
<label *ngIf="ref8.invalid && (ref8.dirty || ref8.touched )">
<div class="text-danger"> *city field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> PHONE NUMBER </label>
<input type="number" class="form-control round3 " id="phnumber" placeholder="PHONE NUMBER " name="phnumber" ngModel
#ref9="ngModel" required>
<label *ngIf="ref9.invalid && (ref9.dirty || ref9.touched )">
<div class="text-danger"> *phone number field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> MOBILE NUMBER </label>
<input type="number" class="form-control round3 " id="mblnumber" placeholder="MOBILE NUMBER " name="mblnumber" ngModel
#ref10="ngModel" required>
<label *ngIf="ref10.invalid && (ref10.dirty || ref10.touched )">
<div class="text-danger"> *mobilenumber field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> REPORTING TO </label>
<input type="text" class="form-control round3 " id="reportingto" placeholder=" REPORTING TO " name="reportingto" ngModel
#ref11="ngModel" required>
<label *ngIf="ref11.invalid && (ref11.dirty || ref11.touched )">
<div class="text-danger"> *reporting to field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> REPORTING NAME </label>
<input type="text" class="form-control round3 " id="reportingname" placeholder="REPORTING NAME" name="reportingname" ngModel
#ref12="ngModel" required>
<label *ngIf="ref12.invalid && (ref12.dirty || ref12.touched )">
<div class="text-danger"> *reporting name field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> GENDER </label>
<input type="radio" value="male" name="gender" [(ngModel)]="gender" #ref13="ngModel" required #genderControl="ngModel"> Male
<input type="radio" value="female" name="gender" [(ngModel)]="gender" #ref13="ngModel" required> Female
<input type="radio" value="others" name="gender" [(ngModel)]="gender" #ref13="ngModel" required> others
<label *ngIf="ref13.invalid && (ref13.dirty || ref13.untouched )">
<div class="text-danger"> *select gender mandatory </div>
</label>
</div>
<div class="form-group">
<label> LOCATION CODE </label>
<input type="text" class="form-control round3 " id="lctncode" placeholder="LOCATION CODE" name="lctncode" ngModel
#ref14="ngModel" required>
<label *ngIf="ref14.invalid && (ref14.dirty || ref14.touched )">
<div class="text-danger"> *location code field is mandatory </div>
</label>
</div>
<div class="text-right">
<button class="btn btn-success" type="button" (click)="next()">Next</button> </div>
</div>
</div>
</form>
<!-- COMMUNICATION -->
<form #ref1="ngForm">
<div *ngIf="b && !communication" >
<h3 class="text-primary">COMMUNICATION</h3>
<div class="form-group">
<label> PHONE NUMBER </label>
<input type="number" class="form-control round3 " id="phnumber" placeholder="PHONE NUMBER " name="phnumber" ngModel
#ref15="ngModel" required>
<label *ngIf="ref15.invalid && (ref15.dirty || ref15.touched )">
<div class="text-danger"> *phone number field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> MOBILE NUMBER </label>
<input type="number" class="form-control round3 " id="mblnumber" placeholder="MOBILE NUMBER " name="mblnumber" ngModel
#ref16="ngModel" required>
<label *ngIf="ref16.invalid && (ref16.dirty || ref16.touched )">
<div class="text-danger"> *mobilenumber field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> E-MAIL </label>
<input type="email" class="form-control round3 " id="email" placeholder="E-MAIL ADDRESS" name="email" ngModel
#ref17="ngModel" required>
<label *ngIf="ref17.invalid && (ref17.dirty || ref17.touched )">
<div class="text-danger"> *email field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> COMPANY E-MAIL </label>
<input type="email" class="form-control round3 " id="cemail" placeholder="COMPANY E-MAIL ADDRESS" name="cemail" ngModel
#ref18="ngModel" required>
<label *ngIf="ref18.invalid && (ref18.dirty || ref18.touched )">
<div class="text-danger"> *company email field is mandatory </div>
</label>
</div>
<div class="text-right">
<button class="btn btn-success" type="button" (click)="secondNext()">Next</button>
</div>
</div>
</form>
<!-- ADMINISTRATION -->
<form #ref2="ngForm">
<div *ngIf="communication && !administration">
<h3 class="text-primary">ADMINISTRATION</h3>
<div class="form-group">
<label>DESIGNATION </label>
<input type="text" class="form-control round3 " id="designation" placeholder="DESIGNATION" name="designation" ngModel
#ref19="ngModel" required>
<label *ngIf="ref19.invalid && (ref19.dirty || ref19.touched )">
<div class="text-danger"> *designation field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>QUALIFICATION </label>
<input type="text" class="form-control round3 " id="qualification" placeholder="QUALIFICATION" name="qualification" ngModel
#ref20="ngModel" required>
<label *ngIf="ref19.invalid && (ref20.dirty || ref20.touched )">
<div class="text-danger"> *qualification field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>HEIGHT </label>
<input type="number" class="form-control round3 " id="height" placeholder="HEIGHT" name="height" ngModel
#ref21="ngModel" required>
<label *ngIf="ref21.invalid && (ref21.dirty || ref21.touched )">
<div class="text-danger"> *height field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> WEIGHT </label>
<input type="number" class="form-control round3 " id="weight" placeholder="WEIGHT" name="weight" ngModel
#ref22="ngModel" required>
<label *ngIf="ref22.invalid && (ref22.dirty || ref22.touched )">
<div class="text-danger"> *weight field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> EXPERIENCE </label>
<input type="number" class="form-control round3 " id="experience" placeholder="EXPERIENCE" name="experience" ngModel
#ref23="ngModel" required>
<label *ngIf="ref23.invalid && (ref23.dirty || ref23.touched )">
<div class="text-danger"> *experience field is mandatory </div>
</label>
</div>
<div class="text-right">
<button class="btn btn-success" type="button" (click)="thirdNext()">Next</button>
</div>
</div>
</form>
<!-- PERSONAL -->
<form #ref2="ngForm">
<div *ngIf="administration && !paymethod">
<h3 class="text-primary" >PERSONAL</h3>
<div class="form-group">
<label> DATE OF BIRTH</label>
<input type="date" class="form-control round3 " id="dob" placeholder="DATE OF BIRTH" name="dob" ngModel
#ref24="ngModel" required>
<label *ngIf="ref24.invalid && (ref24.dirty || ref24.touched )">
<div class="text-danger"> *date of birth field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> FATHER/HUSBAND NAME </label>
<input type="text" class="form-control round3 " id="fhname" placeholder="FATHER/HUSBAND NAME" name="fhname" ngModel
#ref25="ngModel" required>
<label *ngIf="ref25.invalid && (ref25.dirty || ref25.touched )">
<div class="text-danger"> *father/husband field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> CURRENT AGE (YEARS)</label>
<input type="number" class="form-control round3 " id="cage" placeholder="CURRENT AGE (YEARS)" name="cage" ngModel
#ref26="ngModel" required>
<label *ngIf="ref26.invalid && (ref26.dirty || ref26.touched )">
<div class="text-danger"> *current age (years) field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> CURRENT AGE (MONTHS)</label>
<input type="number" class="form-control round3 " id="cagem" placeholder="CURRENT AGE (MONTHS)" name="cagem" ngModel
#ref27="ngModel" required>
<label *ngIf="ref27.invalid && (ref27.dirty || ref27.touched )">
<div class="text-danger"> *current age (months) field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> BLOOD GROUP</label>
<input type="text" class="form-control round3 " id="bloodgrp" placeholder="BLOOD GROUP" name="bloodgrp" ngModel
#ref28="ngModel" required>
<label *ngIf="ref28.invalid && (ref28.dirty || ref28.touched )">
<div class="text-danger"> *bloodgroup field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> NATIONALITY</label>
<input type="text" class="form-control round3 " id="nationality" placeholder="NATIONALITY" name="nationality" ngModel
#ref29="ngModel" required>
<label *ngIf="ref29.invalid && (ref29.dirty || ref28.touched )">
<div class="text-danger"> *nationality field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> PRESENT ADDRESS </label>
<input type="text" class="form-control round3 " id="paddress" placeholder="PRESENT ADDRESS" name="paddress" ngModel
#ref30="ngModel" required>
<label *ngIf="ref30.invalid && (ref30.dirty || ref30.touched )">
<div class="text-danger"> *presentaddress field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>PRESENT ADDRESS 2 </label>
<input type="text" class="form-control round3 " id="paddress2" placeholder="PRESENT ADDRESS 2" name="paddress2" ngModel
#ref31="ngModel" required>
<label *ngIf="ref31.invalid && (ref31.dirty || ref31.touched )">
<div class="text-danger"> *presentaddress2 field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>PRESENT CITY</label>
<input type="text" class="form-control round3 " id="pcity" placeholder="PRESENT CITY" name="pcity" ngModel
#ref32="ngModel" required>
<label *ngIf="ref32.invalid && (ref32.dirty || ref32.touched )">
<div class="text-danger"> *presentcity field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>PRESENT POST CODE </label>
<input type="number" class="form-control round3 " id="pccode" placeholder="PRESENT CITY CODE" name="pccode" ngModel
#ref33="ngModel" required>
<label *ngIf="ref33.invalid && (ref33.dirty || ref33.touched )">
<div class="text-danger"> *presentcitycode field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>PRESENT COUNTRY</label>
<input type="text" class="form-control round3 " id="pcountry" placeholder="PRESENT COUNTRY" name="pcountry" ngModel
#ref34="ngModel" required>
<label *ngIf="ref34.invalid && (ref34.dirty || ref34.touched )">
<div class="text-danger"> *presentcountry field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>PRESENT PHONE NUMBER</label>
<input type="number" class="form-control round3 " id="pphnno" placeholder="PRESENT PHONE NUMBER" name="pphnno" ngModel
#ref35="ngModel" required>
<label *ngIf="ref35.invalid && (ref35.dirty || ref35.touched )">
<div class="text-danger"> *presentphonenumber field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>ADDHAAR NUMBER</label>
<input type="number" class="form-control round3 " id="aadhaar" placeholder="ADDHAAR NUMBER" name="aadhaar" ngModel
#ref36="ngModel" required>
<label *ngIf="ref36.invalid && (ref36.dirty || ref36.touched )">
<div class="text-danger"> *aadhaar field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> PAN NUMBER </label>
<input type="text" class="form-control round3 " id="pannumber" placeholder=" PAN NUMBER " name="pannumber" ngModel
#ref41="ngModel" required>
<label *ngIf="ref41.invalid && (ref41.dirty || ref41.touched )">
<div class="text-danger"> *pan number field is mandatory </div>
</label>
</div>
<div class="text-right">
<button class="btn btn-success" type="button" (click)="fourthNext()">Next</button>
</div>
</div>
</form>
<form #ref3="ngForm">
<!-- pay method -->
<div *ngIf="paymethod">
<h3 class="text-primary"> PAY METHOD </h3>
<div class="form-group">
<label> BANK NAME </label>
<input type="text" class="form-control round3 " id="bankname" placeholder="BANK NAME" name="bankname" ngModel
#ref37="ngModel" required>
<label *ngIf="ref37.invalid && (ref37.dirty || ref37.touched )">
<div class="text-danger"> *bankname field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> BANK IFSC CODE </label>
<input type="text" class="form-control round3 " id="bankifsccode" placeholder="BANK IFSC CODE" name="bankifsccode" ngModel
#ref38="ngModel" required>
<label *ngIf="ref38.invalid && (ref38.dirty || ref38.touched )">
<div class="text-danger"> *bankifsccode field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> ACCOUNT TYPE</label>
<input type="text" class="form-control round3 " id="accounttype" placeholder="ACCOUNT TYPE" name="accounttype" ngModel
#ref39="ngModel" required>
<label *ngIf="ref39.invalid && (ref39.dirty || ref39.touched )">
<div class="text-danger"> *accounttype field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> ACCOUNT NUMBER </label>
<input type="text" class="form-control round3 " id="accountnumber" placeholder=" ACCOUNT NUMBER " name="accountnumber" ngModel
#ref40="ngModel" required>
<label *ngIf="ref40.invalid && (ref40.dirty || ref40.touched )">
<div class="text-danger"> *accountnumber field is mandatory </div>
</label>
</div>
<div class="text-right">
<button class="btn btn-success" type="submit">submit</button>
</div>
</div>
</form>
</div>

Resources