I make a form using ng-form and want to disable the button if input field is invalid, I have tried but it still doesn't work. I don't what I'm missing.
This is the code
<button
class="btn btn-primary btn-sm"
ng-click="compose('Submit',1)"
ng-disabled="memo.nestedForm.perihal.$invalid">
<i class="fa fa-paper-plane-o"> </i>
Kirim
</button>
<form class="tab-form-demo" ng-controller="userCtrl" role="form" name="memo" novalidate>
<uib-tabset active="activeForm">
<uib-tab index="0" heading="Informasi Surat">
<ng-form name="nestedForm" class="form-horizontal">
<div class="form-group">
<label class="col-md-1 col-sm-2 control-label">Perihal</label>
<div class="col-md-10 col-sm-10">
<input type="text" class="form-control" ng-model="surat.subject" name="perihal" required>
<div ng-show='nestedForm.perihal.$dirty && nestedForm.perihal.$invalid'>
<span ng-show='nestedForm.perihal.$error.required'>Required</span>
</div>
</div>
</div>
</ng-form>
</uib-tab>
</uib-tabset>
</form>
You should move the button inside the form to validate
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<button
class="btn btn-primary btn-sm"
ng-click="compose('Submit',1)"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
<i class="fa fa-paper-plane-o"> </i>
Kirim
</button>
</form>
<button
class="btn btn-primary btn-sm"
ng-click="compose('Submit',1)"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
<i class="fa fa-paper-plane-o"> </i>
Kirim outside form
</button>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'Test';
$scope.email = 'Test#gmail.com';
});
</script>
</body>
</html>
Please run the above code, and check the two buttons
HERE is the Working DEMO
Try inserting the button inside from tag .
<form class="tab-form-demo" ng-controller="userCtrl" role="form" name="memo" novalidate>
<uib-tabset active="activeForm">
<uib-tab index="0" heading="Informasi Surat">
<ng-form name="nestedForm" class="form-horizontal">
<div class="form-group">
<label class="col-md-1 col-sm-2 control-label">Perihal</label>
<div class="col-md-10 col-sm-10">
<input type="text" class="form-control" ng-model="surat.subject" name="perihal" required>
<div ng-show='nestedForm.perihal.$dirty && nestedForm.perihal.$invalid'>
<span ng-show='nestedForm.perihal.$error.required'>Required</span>
</div>
</div>
</div>
</ng-form>
</uib-tab>
</uib-tabset>
<button
class="btn btn-primary btn-sm"
ng-click="compose('Submit',1)"
ng-disabled="memo.nestedForm.perihal.$invalid">
<i class="fa fa-paper-plane-o"> </i>
Kirim
</button>
</form>
Related
I am trying to create a form that changes tabs of login and signup that is working fine but the validations that i have used in the code are not working . I have created the controller but still the code is not working. Please have a look at the code and suggest the problem and solution for this problem.
<body ng-app="myApp" ng-controller="panelController as panel">
<div class="row no-gutters">
<div class="col">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand mx-auto" href="#"><img class="brand-image"
src="images/recruitment.png">JobsFinder</a>
</nav>
<div class="logo-text">
<h3>The easiest way to get you new job</h3>
<p>We offer 12000 jobs vacation right now</p>
</div>
</div>
</div>
<div class="col">
<section>
<div class="form animated flipInX">
<ul class="tab-group">
<li class="tab" ng-class="{active: panel.isSelected(2)}"><a
href ng-click="panel.selectTab(2)">Log In</a></li>
<li class="tab" ng-class="{active: panel.isSelected(1)}"><a
href class="test" ng-click="panel.selectTab(1)">Sign Up</a></li>
</ul>
<div class="tab-content">
<div id="signup" ng-show="panel.isSelected(1)" >
<h3>Sign Up for Free</h3>
<form name="signupForm" class="signupForm" novalidate>
<div class="top-row">
<div class="field-wrap">
<input type="text" required autocomplete="off"
placeholder="First name" ng-model="fname">
<span style="color:red" ng-
show="signupForm.fname.$dirty && signupForm.fname.$invalid">
<span ng-
show="signupForm.fname.$error.required">First name is required.</span>
</span>
</div>
<div class="field-wrap">
<input type="text"required autocomplete="off"
placeholder="Last name" ng-model="lname">
<span style="color:red" ng-
show="signupForm.lname.$dirty && signupForm.lname.$invalid">
<span ng-
show="signupForm.lname.$error.required">Last name is required.</span>
</span>
</div>
</div>
<div class="field-wrap">
<input type="email" required autocomplete="off"
placeholder="Email" ng-model="signupemail">
<span style="color: indianred" ng-
show="signupForm.signupemail.$dirty && signupForm.email.$invalid">
<span ng-
show="signupForm.signupemail.$error.required">Email is required</span>
<span ng-
show="signupForm.signupemail.$error.email">Invalid email</span>
</span>
</div>
<div class="field-wrap">
<input type="password"required autocomplete="off"
placeholder="Password" ng-model="signpassword">
<span style="color: indianred" ng-
show="signupForm.signpassword.$dirty && signupForm.signpassword.$invalid">
<span ng-
show="signupForm.signpassword.$error.required">Password is required</span>
</span>
</div>
<div class="field-wrap">
<input type="password"required autocomplete="off"
placeholder="Confirm password" ng-model="cpass">
<span style="color: indianred" ng-
show="signupForm.cpass.$dirty && signupForm.cpass.$invalid">
<span ng-
show="signupForm.cpass.$error.required">Password is required</span>
</span>
</div>
<button type="submit" class="button button-block" ng-
click="submit()" ng-disabled="signupForm.signpassword.$dirty &&
signupForm.signpassword.$invalid || signupForm.signupemail.$dirty &&
signupForm.signupemail.$invalid || signupForm.cpass.$dirty &&
signupForm.cpass.$invalid"/>Get Started</button>
</form>
</div>
<div id="login" ng-show="panel.isSelected(2)" >
<h3>Welcome Back!</h3>
<form class="loginForm" name="loginForm" novalidate>
<div class="field-wrap">
<input type="email"required autocomplete="off"
placeholder="Email" ng-model="loginemail">
<span style="color: indianred" ng-
show="loginForm.loginemail.$dirty && loginForm.email.$invalid &&
loginForm.loginemail.$touched">
<span ng-
show="loginForm.loginemail.$error.required">Email is required</span>
<span ng-
show="loginForm.loginemail.$error.email">Invalid email</span>
</span>
</div>
<div class="field-wrap">
<input type="password"required autocomplete="off"
placeholder="Password" ng-model="logpassword">
<span style="color: indianred" ng-
show="loginForm.logpassword.$dirty && loginForm.logpassword.$invalid">
<span ng-
show="loginForm.logpassword.$error.required">Password is required</span>
</span>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block" type="submit" ng-
click="submit()" ng-disabled="loginForm.logpassword.$dirty &&
loginForm.logpassword.$invalid || loginForm.loginemail.$dirty &&
loginForm.loginemail.$invalid"/>Log In</button>
</form>
</div>
</div>
</div>
</section>
</div>
</div>
<footer>
<div class="text-center">
<p>Copyright © JobFinder 2017. Developed by Avneet Virk &
Shubham Dobriyal</p>
</div>
</footer>
<script src="https://unpkg.com/ionicons#4.2.2/dist/ionicons.js"></script>
<script src="js/panelController.js"></script>
</body>
You haven't specified any name for your inputs. So they're not correctly registered, underthat (absent) name in the form, so signupForm.fname (for example), is undefied.
Inputs must have a name:
<input name="fname" type="text" ... >
I have the following:
<form name="ctrl.form" class="form-horizontal" ng-class="{true: 'has-error'}[submitted && form.email.$invalid]"
novalidate>
<div class="form-group" ng-class="{'has-error' : ctrl.form.inputName.$dirty && ctrl.form.inputName.$invalid}">
<label for="inputName" class="col-sm-2 control-label">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputName" name="inputName" ng-model="ctrl.app.name"
placeholder="Enter stack name" ng-disabled="ctrl.editMode" ng-required='true'
ng-minlength='3' ng-maxlength='32' required/>
</div>
<span ng-show="ctrl.form.inputName.$error.required && !ctrl.form.inputName.$pristine" class="help-block">Name is required</span>
<span ng-show="ctrl.form.inputName.$error.minlength" class="help-block">Name is too short</span>
<span ng-show="ctrl.form.inputName.$error.maxlength" class="help-block">Name is too long</span>
<span ng-show="ctrl.form.inputName.$error.pattern" class="help-block">Name has invalid characters</span>
</div>
<div class="form-group" ng-class="{'has-error' : ctrl.hasServerErrors}">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="ctrl.isCreating"
ng-click="ctrl.SubmitForm()">{{ctrl.editMode ? 'Update' :
ctrl.isCreating? 'Creating': 'Create'}}
</button>
<span ng-show="ctrl.hasServerErrors" class="help-block"
ng-repeat="serverError in ctrl.serverErrors">
{{serverError}}
</span>
</div>
</div>
<div class="alert alert-success" ng-show="ctrl.showUpdateSuccessAlert">
<strong>Successfully updated!</strong>
</div>
</form>
Now, the problem is, even though I have added the required tag to name, still when I click the submit button, the call goes to the backend service without showing that name is mandatory and has to be supplied.
What am I missing in this? Thanks!
<div class="" ng-show="ctrl.form.inputName.$dirty && ctrl.form.inputName.$invalid">
Message which you want to print.
</div>
Add this.
Hope this will help you.
You should check if the form is valid before submitting the form.
<button type="submit" class="btn btn-primary" ng-disabled="ctrl.form.$invalid"
ng-click="ctrl.SubmitForm()">{{ctrl.editMode ? 'Update' :
ctrl.isCreating? 'Creating': 'Create'}}
</button>
$invalid will be true, when the form is not valid.
I am using angular directive for date picker from UI bootstrap. I also use ng-repeat to add multiple rows. I have added date picker code in ng-repeat. I have displayed these date pickers in bootstrap modal. Also ng-repeat is work fine. But if I add multiple row and click on single calendar icon then all calendar popups of all date picker are shown. I don't know why should this happened. I use is-open="$parent.opened1" to perform click on calendar button. If I use only is-open="opened1" then calendar popoup will open only once (means: can not open after selecting any date). And if I use is-open="$parent.opened1" then after adding multiple rows all calendar popup is open.
Here is my code-
<div class="modal fade bs-example-modal-lg preventiveCarePop" id="preventiveProcess" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<form role="myForm" name="myForm">
<div class="modal-dialog" style="width: 35%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 style="margin: 0px;">
Preventive Care: <span ng-bind="patientObj.firstName"></span>
<span ng-bind="patientObj.lastName"></span><small
class="newSmall"><span> ({{patientObj.gender}}, <i
class="fa fa-mobile fa-lg"></i>:
{{patientObj.contact.mobileNumber}})
</span></small>
</h4>
</div>
<input type="hidden" ng-model="currentReminder" />
<div class="modal-body">
<div id="divActivites" name="divActivites">
<div class="form-group">
<div class="box-placeholder" ng-repeat="preventive in preventive.preventiveDetailsList">
<div class="form-group">
<div class="row">
<div class="col-lg-4">
<label for="exampleInputEmail1">Start Date<span
style="color: red;">*</span></label>
<p class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd-MM-yyyy"
ng-model="preventive.startOnDate"
is-open="$parent.opened2"
id="dos-{{$index}}"
datepicker-options="dateOptions" close-text="Close"
placeholder="Select Date" required />
<span class="input-group-btn">
<button type="button" class="btn popUpCal"
ng-click="open($event,'opened2')">
<i class="fa fa-calendar"></i>
</button>
</span>
</p>
</div>
<div class="col-lg-4">
<label for="exampleInputEmail1">End Date<span
style="color: red;">*</span></label>
<p class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd-MM-yyyy"
ng-model="preventive.endOnDate"
id="doe-{{$index}}"
is-open="$parent.opened1"
datepicker-options="dateOptions" close-text="Close"
placeholder="Select Date" required />
<span class="input-group-btn">
<button type="button" class="btn popUpCal"
ng-click="open($event,'opened1')" >
<i class="fa fa-calendar"></i>
</button>
</span>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-default" ng-click="addDummyPreventive(preventive.preventiveDetailsList,currCaseSheetObjForAddPrv.speciality,preventive.preventiveDetailsList.length)" style="float: right" title="Add new preventive"><i class="fa fa-plus-circle fa-lg"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
Here is my controller
$scope.open = function($event,opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
I don't know what I use to work all fine.
Please share your idea's.
Thanks in advance.
Please see this demo and comments inside code can be helpful.
Html:
<div class="row" ng-repeat="dt in dates">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt.date" is-open="dt.opened" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,dt)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
JS:
$scope.open = function($event, dt) {
$event.preventDefault();
$event.stopPropagation();
dt.opened = true;
};
<form class="stdform stdform2" name="projectForm" ng-submit="saveProject(project, projectForm)"
novalidate="novalidate">
<p>
<div class="par control-group" ng-class="{'has-error': projectForm.projectName.$invalid && (projectForm.projectName.$dirty || submitted)}">
<label class="control-label" for="projectname">Name</label>
<div class="controls">
<span class="field">
<input id="projectname" type="text" ng-model="project.name" name="projectName" class="form-control"
required/>
<label ng-show="projectForm.projectName.$error.required && (projectForm.projectName.$dirty || submitted)"
class="error" for="projectname">Please type project name</label>
</span>
</div>
</div>
</p>
<p>
<label>Description</label>
<span class="field">
<textarea ng-model="project.description" name="projectDescription"
style="resize: vertical; height: 110px;" class="form-control input-default"></textarea>
</span>
</p>
<p class="stdformbutton">
<button class="btn btn-default" ui-sref="app.project.list">Cancel</button>
<button class="btn btn-primary" type="submit">{{saveMessage}}</button>
</p>
</form>
Why after pressing the 'Enter' key on keyboard am I redirected to app.project.list instead of having the saveProject(project, projectForm) function executed?
The default type for buttons is submit. You have to explicitly unset it to "button" to avoid the submit action:
<p class="stdformbutton">
<button class="btn btn-default" type="button" ui-sref="app.project.list">Cancel</button>
<button class="btn btn-primary" type="submit">{{saveMessage}}</button>
</p>
You can also set the type="reset" if you want it to clear out the input values.
http://jsfiddle.net/9sCnC/12/#
I'm going through a json file and parsing it through ng-repeat, a button on each item opening a modal window.
In this window a form is generated with data I would like to put into another data array which will be send through post to a php file...
<div ng-repeat="value in model.values">
<input type="text" ng-model="model.values[$index]" />
</div>
<hr>
<!--Details content Begin-->
<div class="circle-list">
<div class="circle-list-item" ng-repeat="course in courses | filter:query | orderBy:predicate:reverse | filter:Type" ng-mouseenter="hover(course)" ng-mouseleave="hover(course)">
<span class="btn-xs pull-right">
<span id="Time" class="glyphicon glyphicon-time"></span> {{course.duur}}u
</span>
<a id="course.Id" title="{{course.NoEDA}}" href="{{course.link}}">{{course.titel | lowercase}}</a>
<span id="Type" class="ng-class:course.type">{{course.type}}</span>
<span ng-show="course.showOverlay" class="btn-group btn-group-xs">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#ModalSubscribe{{$index}}"><span class="glyphicon glyphicon-pencil"></span></button>
<!-- <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span></button> -->
<!-- Button trigger modal -->
</span>
<div class="modal fade" id="ModalSubscribe{{$index}}" tabindex="-1" role="dialog" aria-labelledby="ModalSubscribe" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="glyphicon glyphicon-pencil"> Inschrijven</h4>
</div>
<div class="modal-body">
<!-- SHOW ERROR/SUCCESS MESSAGES -->
<!--
<div id="messages" ng-show="message" ng-class="{ 'has-error' : errormail }">{{ message }}</div>
-->
<div id="messages" class="alert alert-success" data-ng-show="message" >{{ message }}</div>
<div id="messages" class="alert alert-danger" data-ng-show="errormessage" >{{ errormessage }}</div>
<form id="register" name="register" class="form-horizontal" role="form" ng-submit="processForm()">
<div id="name-group" class="form-group">
<!-- EDA -->
<label class="col-sm-2 control-label">Opleiding:</label>
<div class="col-sm-10 controls">
<input type="text" name="eda[]" class="form-control" value="{{course.NoEDA}}" ng-model="course.NoEDA">
</div>
<!-- Name -->
<label class="col-sm-2 control-label">Naam:</label>
<div class="col-sm-10 controls">
<input type="text" name="name[]" class="form-control" placeholder="Naam" ng-model="formData.name">
</div>
<!-- Matricule -->
<label class="col-sm-2 control-label">Stamnumer:</label>
<div class="col-sm-10 controls">
<input type="number" name="matricule[]" class="form-control" placeholder="Stamnummer" ng-model="formData.matricule">
</div>
</div>
<!--<legend>Email</legend>-->
<div class="form-group" ng-class="{'has-error': errormail}">
<label class="col-sm-2 control-label">Email:</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="email" name="[]mail" class="form-control" data-ng-model="formData.mail" placeholder="mail"/>
</div>
<!--<span class="help-block" ng-show="errormail">{{ errormail }}</span>-->
</div>
<input type="checkbox" ng-model="formData.agree1" name="Agreement1[]" required />
Ik ben akkoord
<input type="checkbox" ng-model="formData.agree2" name="Agreement2[]" required />
Ik ga akkoord
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Sluit</button>
<button type="submit" class="btn btn-primary" ng-enabled="{{register.mail}}"><i class="glyphicon glyphicon-ok"></i> Inschrijven</button>
</div>
</form>
{{ formData }}
</div>
</div>
</div>
<!-- temp, later wel plaatsen
<span class="label label-default">{{course.Departement}}</span>
-->
<small>
<br/><i id="placelabel" class="text-muted"><span class="glyphicon glyphicon-map-marker"></span> {{course.plaats || "-"}}</i>
<i id="placename" class="text-primary"><span class="glyphicon glyphicon-calendar"></span> {{course.organisatie || "-"}}</i>
<small id="public" class="pull-right"><br /><i class="doelgroep">{{course.doelgroep}}</i></small>
</small>
</div>
</div>
<!--Details content End-->
</div>
<!--container content End-->
What I don't understand is:
ng-init="formData.eda=course.NoEDA" is putting the last item in the array I guess
value="{{course.NoEDA}}" this is showing the good item array
how do I transfer the right item from course.NoEDA to another ng-model formData.eda?
I'm just starting with this, if I'm doing this the wrong way please help me out here...
my fiddle isn't working at all but on my local server everything is working except passing the values to post them...
thanks in advance...