I'm facing a problem with Angular. My code is simple but ng-hide doesn't work. I want to hide a part of the code when a button of the sign up form has been modified by user. Could you help me?
<body ng-app="myApp" ng-controller="formCtrl">
<form name="signUpForm" ng-submit="signUpFormSubmit(signUpForm.$valid)" novalidate>
<input type="text" placeholder="Email address *" name="signUpEmail">
<input type="text" placeholder="Pseudo *" name="signUpPseudo">
<input type="password" placeholder="Password *" name="signUpPassword">
<button type="submit" class="button button-block button-positive">Sign Up</button>
<div ng-hide="signUpForm.signUpEmail.$pristine || signUpForm.signUpPseudo.$pristine || signUpForm.signUpPassword.$pristine">
<hr>
<div class="padding-horizontal">
<h4 class="center">You already have an account?</h4>
<button class="button button-block button-stable">Sign In</button>
</div>
</div>
</form>
Here is a JsFiddle : http://jsfiddle.net/9ce63mno/3/
UPDATE: although I don't know why a controller is needed in this case, I added one. Also I defined ng-app.
Thank you
I found the problem. Apparently it is because there is no ng-model defined for the form fields.
Related
I'm trying to disable a button using AngularJS
<button
type="submit"
ng-disabled="emailConfig.$invalid"
ng-click="createEmailconfig()"
class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg"
name="submit"
id="submit"
>
<span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
</span>Submit
</button>
If the form is invalid or a specific length isn't met, the button should be disabled. However, it's not working as it's supposed to.
Can someone help me out?
all you need to do is add ng-maxlength directive to the input fields and the form will be disabled with your current code, checkout this basic working example!
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<input name="input" ng-model="userType" ng-maxlength="5" required>
<button type="submit" ng-disabled="emailConfig.$invalid" ng-click="createEmailconfig()" class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg" name="submit" id="submit">
<span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
</span>Submit
</button>
</form>
</div>
some addition to #Naren Murali answer
You have no ng-model and inputs in your example.
You can validate a field using the required attribute and ng-model.
Using ng-model:
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button ng-model="button" ng-disabled="modelName.$invalid">Button</button>
</form>
</div>
note: Set the novalidate attribute on the form-tag so the default HTML5 validation gets overwritten by Angular in your app.
You can validate a form using the required attribute and the form name.
For your example:
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button type="submit" ng-disabled="emailConfig.$invalid" ng-
click="createEmailconfig()" class="yourClass" name="submit" id="submit">Submit</button>
</form>
</div>
So for some reason I am only getting the password on click. I've tried moving the div around. I used a div instead of a form. Been trying to figure this out. Please Help.
<div class="container">
<div class="row">
<div class="col-md-offset-5 col-md-3">
<form class="form-login">
<h4>Welcome</h4>
<input type="text" ng.model="vm.user.name" class="form-control input-sm chat-input" placeholder="username" />
</br>
<input type="text" ng-model="vm.user.password" class="form-control input-sm chat-input" placeholder="password" />
</br>
<div class="wrapper">
<span class="group-btn">
<button type="submit" ng-click="vm.authenticate(vm.user)" class="btn btn-primary btn-md">login <i class="fa fa-sign-in"></i></a>
</span>
</div>
</form>
</div>
</div>
Hya you used ng.model instead of ng-model :3
And a long day it has been indeed
I am trying to create a modal with form using angularjs and bootstrap.
First I created the form and now I am trying to put it to modal template but the form-control is sliding out of the modal as you can see in the link attached.
<div class="modal-header">
<h3 class="modal-title">Add New Review</h3>
</div>
<div class="modal-body">
<form role="form">
<fieldset>
<legend>Basic Information</legend>
<div class="container">
<div class="form-group">
<label for="address">Address</label>
<input type="text" id="address" name="address" class="form-control col-sm-1"
ng-model="editableReview.address"
required>
</div>`enter code here`
</fieldset>
</form>
</div>
<div class="modal-footer">
<div class="col-sm-offset-10">
<input type="button" class="btn btn-default" value="Cancel" ng-click="cancelForm()"/>
<input type="submit" class="btn btn-primary" value="Submit" ng-click="submitForm()"/>
</div>
</div>
this is what I get:
It seems like your problem is with the div class, specifically the container. I think you should try to delete this line:
<div class="container">
(and ofcourse its closing tag: </div>, and see if it fixes your issue.
Let me know if that helps.
<form ng-submit="update()">
<label class="item item-input item-floatinglabel">
<input type="text" ng-model="word">
</label>
<button class="btn btn-primary"ng-click="OnClick()">Get Words</button>
</form>
This is the current form I have. console logging "word" currently returns the word that's input however for some reason when I attach an <ion-scroll> </ion-scroll> around the form it only returns as "undefined". Is there a work around for this?
You need to create an object in controller and use its properties as models like below.
<label class="item item-input item-floatinglabel">
<input type="text" ng-model="content.word">
</label>
<button class="btn btn-primary" type="submit">Get Words</button>
</form>
In your controller you can get the value like
$scope.content.word
Check the plunker
Hope it helps.
I recently have a problem with ng message in angular. I tried to use it as validator however noticed that something don't work the way I want. I want the ctrl.login() function run when the user provide both password and username. Unfortunately right now it is enough to provide just one of this to and the function will trigger. How can I fix this?
<form name="authorizationForm" novalidate="" ng-submit="ctrl.login()">
<div class="list list-inset">
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid && authorizationForm.$submitted }">
<input type="text" name="username" placeholder="Username" ng-model="ctrl.data.username" required>
</div>
<div ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error" ng-messages-include="error-list.html"></div>
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted }" >
<input type="password" name="password" placeholder="Password" ng-model="ctrl.data.password" required>
</div>
<div ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error" ng-messages-include="error-list.html">
</div>
</div>
<div ng-show="loginFailed" class="error-wrongCredentials"><i class="icon ion-close-circled"></i>USERNAME OR PASSWORD IS INCORRECT</div>
<button class="button button-full button-calm button-login" data-ng-disabled="authorizationForm.password.$invalid && authorizationForm.username.$invalid" type="submit">Sign In</button>
</form>
<script id="error-list.html" type="text/ng-template">
<div class="error" ng-message="required">
This field is required
</div>
</script>
EDIT: For clarification. Thx for pointing out the button disable feature but it is not the point of my question. The issue is that the ctrl.login function will be triggered (in other words the form will be submited) despite only 1 out of 2 required input have been filled. I expect that the ngMessage will make it impossible to submit the form if username OR password will be empty. The disable feature on the submit button is just a quick hotfix that i want to remove in the future.
<form name="authorizationForm" novalidate="" ng-submit="ctrl.login()">
<div class="list list-inset">
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid && authorizationForm.$submitted }">
<input type="text" name="username" placeholder="Username" ng-model="ctrl.data.username" required>
</div>
<div ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error" ng-messages-include="error-list.html"></div>
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted }" >
<input type="password" name="password" placeholder="Password" ng-model="ctrl.data.password" required>
</div>
<div ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error" ng-messages-include="error-list.html">
</div>
</div>
<div ng-show="loginFailed" class="error-wrongCredentials"><i class="icon ion-close-circled"></i>USERNAME OR PASSWORD IS INCORRECT</div>
<button class="button button-full button-calm button-login" type="submit">Sign In</button>
</form>
<script id="error-list.html" type="text/ng-template">
<div class="error" ng-message="required">
This field is required
</div>
</script>
EDIT2: Just if case anyone is wondering. I solved the problem. Thx for help and contribution :)
You just need to replace && to || in :
data-ng-disabled="authorizationForm.password.$invalid && authorizationForm.username.$invalid"
You should change the data-ng-disabled condition to 'authorizationForm.password.$invalid || authorizationForm.username.$invalid'. Right now as long as one of the two is valid (but not necessarily both), the user can click submit.