Angular Js form validation error - angularjs

I have written simple code for angular validation.
The create button should remain disabled util the user enters all the details.
But now the button does not get disabled.The code for form is,
<form name="networkIDForm" novalidate>
<div class="ActsummaryHdrs pb10">Create Network ID</div>
<div class="form-group clearfix " ng-class="{ 'has-error': networkIDForm.networkID.$touched && networkIDForm.networkID.$invalid }">
<input type="text" placeholder="Network ID" name="networkID" class="form-control column48 pull-left " required/>
</div>
<div class="clearfix clearfix mt20">
<div class="column48 pull-left form-group" ng-class="{ 'has-error': networkIDForm.firstname.$touched && networkIDForm.firstname.$invalid}">
<input type="text" placeholder="First Name" name="firstname" class="form-control" required/>
</div>
<div class="column48 pull-left form-group" ng-class="{ 'has-error': networkIDForm.lastname.$touched && networkIDForm.lastname.$invalid }">
<input type="text" placeholder="Last Name" name="lastname" class="form-control" required/>
</div>
</div>
<div class="clearfix mt20 mb10 form-group" ng-class="{'has-error': networkIDForm.email.$touched && networkIDForm.email.$invalid }">
<input type="text" id="to" name="email" placeholder="Email Address" class="form-control " required/>
</div>
<div class="clearfix mt20">
<div class="column48 pull-left form-group" ng-class="{ 'has-error': networkIDForm.password.$touched && networkIDForm.password.$invalid }">
<input class="form-control" type="Password" placeholder="Password" name="password" required/>
</div>
<div class="column48 pull-right form-group" ng-class="{ 'has-error':networkIDForm.cpassword.$touched && networkIDForm.cpassword.$invalid }">
<input type="Password" placeholder="Confirm Password" name="cpassword" class="form-control" required/>
</div>
</div>
<div class="clearfix mt20 mb10">
<a id="CreateUserCreateBtn" class="btn general_btns_green pull-right ml5" ng-disabled="networkIDForm.$invalid">Create</a>
<a id="CreateUserBackBtn" onclick="showCreateNetworkID()" class="btn general_btns_grey pull-right mr5" href="">Back</a>
</div>
</form>

You can't disable anchor tag using ng-disabled.
Try to use button tag instead
<button id="CreateUserCreateBtn" type="button" class="btn general_btns_green pull-right ml5" ng-disabled="networkIDForm.$invalid">Create</button>
or you can do it using ng-class
Like this
.not-active {
pointer-events: none;
cursor: default;
}
<a id="CreateUserCreateBtn" class="btn general_btns_green pull-right ml5" ng-class="{'not-active' : networkIDForm.$invalid }">Create</a>
You are also missing ng-model in your form.
JSFIDDLE

Related

Ng-click validation is not working

I am beginer in angular js. I am validating a form with some input feild and form is posting on ng-click but validation is not working, validation message are displaying for a white then disappear i have to submit the form after validating. form ng-click should not be called untill the form is valid please help me . Thanks in advance.
<form name="teamForm" novalidate ng-submit="submit(teamForm)" class="formfields">
<div class="col-md-12">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="lname">First Name:</label>
<input type="text" name="firstname"
ng-model="FirstName" class="form-control custom-form-control"
placeholder="First Name" required="required">
<span class="text-danger"
ng-show="(teamForm.firstname.$dirty || submitted) && teamForm.firstname.$error.required">Required</span>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" name="lastname"
ng-model="LastName" class="form-control custom-form-control"
placeholder="Last Name" required="required">
<span class="text-danger"
ng-show="(teamForm.lastname.$dirty || submitted) && teamForm.lastname.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="email">Email:</label>
<input type="text" name="email"
ng-model="Email" class="form-control custom-form-control"
ng-pattern="/^[^\s#]+#[^\s#]+\.[^\s#]{2,}$/"
placeholder="Email" required="required">
<span class="text-danger"
ng-show="(teamForm.email.$dirty || submitted) && teamForm.email.$error.required">Required</span>
<span class="text-danger"
ng-show="teamForm.email.$dirty &&teamForm.email.$error.pattern">Please Enter Valid Email</span>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Phone Number:</label>
<div class="clearfix"></div>
<input type="text" name="phone"
ng-model="Phone" class="form-control custom-form-control"
placeholder="XXXXXXXXXX" required="required">
<span class="text-danger"
ng-show="(teamForm.phone.$dirty || submitted) && teamForm.phone.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label>Message:</label>
<textarea class="form-control rounded-0" rows="5"
name="comment" placeholder="Message"
ng-model="Comment" required="required"></textarea>
<span class="text-danger"
ng-show="(teamForm.comment.$dirty || submitted) && teamForm.comment.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label>Upload Resume:</label>
<!--<input type="file" name="ResumePath" id="filehandler" />-->
<input type="file" id="file1" name="file" class="filelabel sr-only" multiple ng-files="getTheFiles($files)" onchange="Checkfiles($(this))" />
<!-- <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/> -->
<label for="file1" class="form-control">
<span><i class="fa fa-file"></i> Drag file here or choose file</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div vc-recaptcha key="'6Lc860IUAAAAAAyWI9WD8EV4eITu4ODdhuYHdzi8'"
class="grecaptcha" ng-model="respone1"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<button type="button" id="btnSubmit"
ng-click="uploadFiles()" value="Upload"
class="btn btn-green center-block pull-left">
<i class="fa fa-send"></i>{{btnText}}</button>
</div>
</div>
<div class="form-group text-center">
<h5 class="text-success" style="font-weight:bold">{{messagesuccess}}</h5>
<h5 class="text-danger" style="font-weight:bold">{{messageerror}}</h5>
</div>
</div>
</form>
ng-click (or it's vanilla cousin, onclick) do not check form validation. The function for submission needs to be defined at the form level, and then you specify which button acts as the submit button in order to get form behavior.
I see you already have a submit function defined. I assume you want to change that to uploadFiles. And if you want the form to conduct validation, remove the novalidation attribute.
<form name="teamForm" ng-submit="uploadFiles()" class="formfields">
then, for the button you would specify it is the submission button and remove the ng-click.
<button type="submit" id="btnSubmit"
value="Upload"
class="btn btn-green center-block pull-left">
<i class="fa fa-send"></i>{{btnText}}</button>

How to hide/show in angular 2

I have used [hidden] as below where "secondTab" value is true.
<form #siteForm="ngForm" novalidate (ngSubmit)="saveSite(siteForm.value,siteForm.valid)" class="admin-modal">
<div class="txt-danger">{{errorMessage}}</div><br/>
<ul role="tablist" class="nav nav-tabs">
<li [ngClass]="{active:firstTab}"><a (click)="siteDetail()">Site Details</a></li>
<li [ngClass]="{active:secondTab}"><a (click)="siteLocation()">Site Location</a></li>
</ul>
<div [hidden]="secondTab">
<input type="hidden" class="form-control" value="{{site.location}}" name="location" [(ngModel)]="site.location" #location>
<input type="hidden" class="form-control" value="{{site.id}}" name="id" [(ngModel)]="site.id" #id>
<div class="form-group mb-20" [ngClass]="{'has-error':name.errors && (name.dirty || name.touched || siteForm.submitted)}">
<label class="control-label mb-10">Site Name</label>
<input type="text" class="form-control default-rounded" name="name" required [(ngModel)]="site.name" #name>
<small [hidden]="name.valid || (name.pristine && !siteForm.submitted)" class="text-danger">
Name is require.
</small>
</div>
<div class="form-group mb-20" [ngClass]="{'has-error':maximumCapacity.errors && (maximumCapacity.dirty || maximumCapacity.touched || siteForm.submitted)}">
<label class="control-label mb-10">Maximum Capacity</label>
<input type="text" class="form-control default-rounded" name="maximumCapacity" required [(ngModel)]="site.maximumCapacity" #maximumCapacity pattern="[0-9]+">
<small [hidden]="maximumCapacity.valid || (maximumCapacity.pristine && !siteForm.submitted)" class="text-danger">
Maximum capacity is require (enter only digits)
</small>
</div>
<div class="form-group mb-20">
<label class="control-label mb-10">Site Type</label>
<select class="form-control" name="type" [(ngModel)]="site.type" #type>
<option>Comercial</option>
<option>Residential</option>
<option>Industrial</option>
<option>Etc</option>
</select>
</div>
<div class="form-group mb-20" [ngClass]="{'has-error':contactNumber.errors && (contactNumber.dirty || contactNumber.touched || siteForm.submitted)}">
<label class="control-label mb-10">Site Contact Number</label>
<input type="text" class="form-control default-rounded" name="contactNumber" required [(ngModel)]="site.contactNumber" #contactNumber>
<small [hidden]="contactNumber.valid || (contactNumber.pristine && !siteForm.submitted)" class="text-danger">
Site contact number is require
</small>
</div>
</div>
<div [hidden]="firstTab">
<div class="form-group mb-20">
<label class="control-label">Address</label>
<div class="flex">
<div class="w-79 mr-10 mt-5">
<input type="text" class="form-control default-rounded" name="location" required places-auto-complete (place_changed)="placeChanged($event)" [types]="['geocode']">
</div>
<div class="mt-5">
<button type="button" class="btn btn-primary black-background white-text pull-right" (click)="chnageMap()">Lookup</button>
</div>
</div>
</div>
<div class="form-group mb-20">
<ng2-map zoom="{{zoom}}" center="{{site.latitude}}, {{site.longitude}}">
<marker *ngFor="let pos of positions" [position]="pos" [icon]="markerImage"></marker>
<drawing-manager [drawingMode]="'marker'" [drawingControl]="true" [drawingControlOptions]="{ position: 2, drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle'] }" [circleOptions]="{ fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, editable: true, zIndex: 1 }"></drawing-manager>
</ng2-map>
</div>
</div>
<button type="submit" class="btn btn-primary black-background white-text pull-right">Save</button>
If I set value false of "secondTab" then I got below error
ORIGINAL EXCEPTION: self._NgModel_202_5.context is not a function
If I use ngFor instead of [hidden] then it works fine but I didn't get value on form submit if I am on second tab.
If I used formBuilder then for form then also it will works fine.
So I may be issue with ngModel
What is the point of using here?
#location="ngModel"
you normally use #variable to have a reference on the html element in this case.
Try changing the code to this:
<div [hidden]="secondTab">
<input type="hidden" class="form-control" value="{{site.location}}" name="location" [(ngModel)]="site.location" #location>
</div>
As a recommendation I wouldn´t use the hidden property but *ngIf="secondTab"

How to switch form base of flag in HTML (Angular JS)

I want to use same form for two different Views and I have two different roles.
1. Client
2. Manager
In my Controller I have added a flag based on the user role that is logged in.
$scope.userFlag=$rootScope.globalSession.UserRole,
If I login as a Manager then the value of $rootScope.globalSession.UserRole="Manager"
& If I login as a Client then the value of $rootScope.globalSession.UserRole="Client"
Now in my form I have added a condition to switch it -> ng-if="userFlag==Admin"
<form class="form-horizontal" name="UpdateAdminProfileForm" id="UpdateAdminProfileForm">
<h2>Update Profile</h2>
<hr>
<fieldset name="client" id="client" ng-if="userFlag==Admin">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">Domain Name*</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="Enter your username" class="form-control input-md" ng-model="theClient.OrganizationDomain" disabled>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="update"></label>
<div class="col-md-4">
<a><button id="update" name="update" class="btn btn-primary" ng-click="updateClient()">Update</button></a>
</div>
</div>
</fieldset>
<fieldset name="manager" id="manager" ng-show="userFlag==Manager">
<div class="form-group" ng-class="{ 'has-error': submitted && UpdateAdminProfileForm.myemail.$error.required || UpdateAdminProfileForm.myemail.$error.pattern }">
<label class="col-md-4 control-label" for="myemail">Email*</label>
<div class="col-md-4">
<input id="myemail" name="myemail" type="email" placeholder="Enter your email" class="form-control input-md" ng-model="theClient.Email" ng-pattern="regex.Email" ng-maxlength="20" required autofocus >
<span ng-show="submitted && UpdateAdminProfileForm.myemail.$error.required" class="help-block">Email can not be empty</span>
<span ng-show="UpdateAdminProfileForm.myemail.$error.pattern && UpdateAdminProfileForm.myemail.$invalid " class="help-block">Please enter a valid email</span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" type="button" ng-click="updateManager()">Save</button>
</div>
</fieldset>
</form>
</div>
</div>
But its not working when I open the form, its empty and If I remove ng-if="userFlag==Admin" & ng-if="userFlag==Manager" from tags then it display the fields for both field set.
Image With FLAG
Image After Removing FLAG
Help! Thanks in advance.
It should be
ng-if="userFlag=='Admin'"
Try This
ng-if="userFlag=='Admin'" or ng-show="userFlag=='Manager'"

ng-form in ng-repeat and checking the validation status of all forms

So, I have a parent form with a nested set of ng-forms like this:
<form class="row" name="parentForm" ng-repeat="model in controller.addresses track by $index" novalidate>
<div class="col-xs-12 row-title">
<h1>{{ model.type || 'Delivery' }} address</h1>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4">
<div class="form" name="saveForm" ng-form>
<div class="form-group">
<label class="control-label">Company name</label>
<input class="form-control" name="company" type="text" placeholder="Enter your company name" ng-model="model.company" />
</div>
<div class="form-group" ng-class="{ 'has-error' : saveForm.address1.$invalid && !saveForm.address1.$pristine }">
<label class="control-label">House name/number</label>
<input class="form-control" name="houseName" type="text" placeholder="Please enter your address 1" ng-model="model.houseName" ng-minlength="3" required />
</div>
<div class="form-group">
<label class="control-label">Street</label>
<input class="form-control" name="street" type="text" placeholder="Please enter your address 2" ng-model="model.street" />
</div>
<div class="form-group">
<label class="control-label">Town</label>
<input class="form-control" name="town" type="text" placeholder="Please enter your address 3" ng-model="model.town" />
</div>
<div class="form-group">
<label class="control-label">County</label>
<input class="form-control" name="county" type="text" placeholder="Please enter your address 4" ng-model="model.county" />
</div>
<div class="form-group" ng-class="{ 'has-error' : saveForm.postCode.$invalid && !saveForm.postCode.$pristine }">
<label class="control-label">Post code</label>
<input class="form-control" name="postCode" type="text" placeholder="Enter your post code" ng-model="model.postCode" ng-minlength="3" required />
</div>
</div>
</div>
</form>
I then have a button:
<div class="row">
<div class="col-xs-12 col-sm-4 col-lg-4">
<div div class="row">
<div class="col-xs-6 tile">
<a class="red" ui-sref="^">
<i class="fa fa-trash"></i>
<div class="footer">Back</div>
</a>
</div>
<div class="col-xs-6 tile" ng-if="parentForm.$valid">
<a class="yellow" ui-sref="^.finance">
<i class="fa fa-arrow-right"></i>
<div class="footer">Continue</div>
</a>
</div>
</div>
</div>
</div>
I want this button to only show if all child forms are valid. I was hoping that I could just use parentForm.$valid but that doesn't work.
Does anyone know how to solve this?
Try to do parentForm.saveForm.$valid.
It will work
Nested forms aren't valid in HTML5 - but you can place your saveForm outside the parentForm and then use the input element's form attribute to specify a form for your input elements.
<form name="form1">
<input type="string" ng-model="form1input" required>
<input type="string" form="form2" ng-model="form2input" required>
</form>
<div ng-form="form2" id="form2"></div>
<button ng-if="form1.$valid && form2.$valid">Click</button>
Plunker: https://plnkr.co/edit/y9ipsNoEW596guLf2CzM?p=preview

performing Angular form validations without using HTML form tag

I want to apply Angular Form Validation without using an HTML form. I tried following, but it doesn't disable the button.
<ng-form name="login">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" name="username" value="" placeholder="Username" class="form-control" id="login-username" ng-required="true">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input type="password" id="login-password" class="form-control" name="password" placeholder="Password" ng-required="true">
</div>
<button style="width: 100%;" title="" data-original-title="" role="button" class="btn custom-small-btn btn-primary hvr-float-shadow" ng-disabled="login.username.$invalid || login.password.$invalid">Login</button>
</ng-form>
tried using ng-diabled="login.$invalid" as well and that didn't work either. What should I do to make it work.
Just use ng-model in your form fields and it will work::
<ng-form name="login">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" ng-model="username" name="username" value="" placeholder="Username" class="form-control" id="login-username" ng-required="true">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input type="password" ng-model="password" id="login-password" class="form-control" name="password" placeholder="Password" ng-required="true">
</div>
<button style="width: 100%;" title="" data-original-title="" role="button" class="btn custom-small-btn btn-primary hvr-float-shadow" ng-disabled="login.username.$invalid || login.password.$invalid">Login</button>
</ng-form>

Resources