How can I retrieve a form value in the controller, when the specific field is no field of the model?
<form name="userForm" ng-submit="updateUser()">
//fields of model
<input type="text" name="firstname" ng-model="user.first_name" required/>
//not bound to model
<input type="password" name="password"/>
<input type="password" name="password_confirmation"/>
</form>
In the controller:
console.log($scope.password);
returns undefined. Is it possible to get the passwords without modifing the user resource?
You can just add ng-model="password", it'll get added to the scope but not $scope.user:
<input type="password" name="password" ng-model="password" />
<input type="password" name="password_confirmation" ng-model="password_confirmation" />
Related
I want to store the data in an array using the ng-model. I have an controller as RegisterController in which i inject $scope with ng-model name as user i.e. $scope.user={}.Here i am reading the data from form input element and submitting the data that has ng-model="user.name" and now i want to store that name or the multiple values in that user object.
<form class="well" align="center">
<input ng-model="user.name" name="name" type="text"><br/>
<input ng-model="user.name" name="mobile" type="text"><br/>
<input ng-model="user.name" name="mail" type="mail"><br/>
<input ng-model="user.name" type="password" name="otp"><br/><br/>
<button type="button">Sign Up</button>
Login<br><br>
</form>
and the controller is
app.controller("RegisterController",function($scope){
$scope.user={};
})
Now let me know to store the data in the user that as array with example
I think your doing a small mistake. Instead of sending the same ng-model="user.name" send is as,
<form class="well" align="center">
<input ng-model="user.name" name="name" type="text"><br/>
<input ng-model="user.mobile name="mobile" type="text"><br/>
<input ng-model="user.mail" name="mail" type="mail"><br/>
<input ng-model="user.password" type="password" name="otp"><br/><br/>
<button type="button">Sign Up</button>
Login<br><br>
</form>
And you have to send that ng-model to the function as in button
<button type="button" ng-click="signup(user)">SignUp</button>
now you can able to get what you want
Guys it was very simple and now i get. In HTML it should be like this,
<div ng-controller="RegisterController">
<form class="well" align="center">
<input ng-model="user.name" name="name" type="text"><br/>
<input ng-model="user.mobile name="mobile" type="text"><br/>
<input ng-model="user.mail" name="mail" type="mail"><br/>
<input ng-model="user.password" type="password" name="otp"><br/><br/>
<button type="button" ng-click="signup(user)">Sign Up</button>
Login<br><br>
</form>
</div>
Now In Register Controller, i need just, an array as follows:
app.controller("RegisterController",function($scope){
$scope.regruser=[];
$scope.signup=function(user){
$scope.regruser.push(user);
}
})
Now you can get $scope.regruser where you needed. as it having all registered user.
I don't see any benefit of storing the user model in an array. Instead extend the user model with properties name, mobileNumber, email, password
$.scope.user = {
name: '',
mobileNumber: '',
email: ''
password: ''
}
And in your html bind model properties to their corresponding input fields like
<input class="form-group" name="mobile" type="text" placeholder="Enter Mobile Number" ng-model="user.name.mobileNumber"/>
And if you still need to have an array then parse the $scope.user model and extract values to array in angular controller.
HTML PART
<form class="well" align="center">
<input class="form-group" name="name" type="text" placeholder="Enter Name" ng-model="user.name"><br/>
<input class="form-group" name="mobile" type="text" placeholder="Enter Mobile Number" ng-model="user.mobile"><br/>
<input class="form-group" name="mail" type="mail" placeholder="Enter mail id" ng-model="user.mail"><br/>
<input class="form.group" type="password" name="otp" placeholder="Enter Password" ng-model="user.password"><br/><br/>
<button type="button" class="btn btn-warning btn-sm" ng-click="signUp()">Sign Up</button>
Login<br><br>
</form>
Code For Controller :
$scope.user = {
name: '',
mobile: '',
mail: '',
password: ''
};
This answer is a correction to Andrejs Abrickis answer as well. Because:
he misses comma after email
he misses semi-colon after "}"
Adds an extra dot in between $ & scope
Thanks You... Hope It Helps You all.. :)
I have the following code in an input text box with the required attribute, but when I tab off of the field or submit the form, it doesn't stop the form from submitting and informing the user the field is required.
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control"
placeholder="Enter Total Amount" id="txtTotalAmount"
ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
</div>
What do I need to do to make the required directive to work?
For that you should fire ng-submit event when form is valid
ng-submit="myForm.$valid && submit()"
Seems like you have also missed the name attribute on your input field, also for showing an error you could use ng-show/ng-messages directive
<form name="myForm" ng-submit="myForm.$valid && submit()">
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control" placeholder="Enter Total Amount" name="txtTotalAmount"
id="txtTotalAmount" ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
<span ng-show="myForm.txtTotalAmount.$error.required">Required</span>
</div>
</form>
I'm trying to get the second password input only to show after the user starts typing into the first input. Also, is there are way to either "require" them both or none at all?
<form name="signUpForm">
...
<input ng-modal="password" type="password" placeholder="password">
<input ng-show="password.$dirty" class="animate-show animate-hide" type="password" placeholder="password (again)">
</form>
password has no property like $dirty but form controller has that one. So first of set name of input then you can access form controller with it
<form name="signUpForm">
...
<input name="passwordNameAttr" ng-modal="password" type="password" placeholder="password">
<input ng-show="signUpForm.passwordNameAttr.$dirty" class="animate-show animate-hide" type="password" placeholder="password (again)">
</form>
for dynamic require you can use ng-required. Just put an expresion on it and depends on condition your fields will be required or not...
another example using ng-show $valid required for input fields ..
html:
<form name="signUpForm">
<input name="firstPassword" ng-model="first.password" type="password" placeholder="password" required>
<input name="secondPassword" ng-show="signUpForm.firstPassword.$valid" ng-model="second.password" type="password" placeholder="password (again)" required>
</form>
working fiddle here: https://jsfiddle.net/vj5evgyw/2/
Why isn't the error variable being set here? Shouldn't user.username.$error.minlength be true when no value is in the input?
<form name="user" ng-submit="submit()">
<div class="input-wrapper">
<input placeholder="Username" ng-model="user.username" ng-minlength="2" ng-maxlength="12" />
<div ng-show="user.username.$error.minlength">Min length!</div>
</div>
<div class="input-wrapper">
<input placeholder="Password" ng-model="user.password" ng-minlength="5" ng-maxlength="15" />
<div ng-show="loginForm.password.$error.minlength">Min length!</div>
</div>
</form>
if you need to show the message when there is no value for the password you need to check the required property.
put a name for the form
<form name="formName" ng-submit="submit()">
put a name to password input. and the required attribute
<input name="password" placeholder="Password" ng-model="user.password" ng-minlength="5" ng-maxlength="15" required />
change the ng-show as,
<div ng-show="formName.password.$error.required || formName.password.$error.minlength">Min length!</div>
formName.password.$error.required will handle the status of empty input.
here is a plunker demo
I'm trying to update a database from a form without using any php, I'm using angularjs with MySql
If I use the following with the put method I can insert a user into the data base, I've
http://localhost:8080/CyberSolution/rest/user/register?u=tester&pw=fred&fname=Fred&lname=Smith&email=fred#localhost.com
I've made a basic html form
<form method="POST" action="">
Username: <input type="text" name="username" size="15" /><br />
Password: <input type="password" name="password" size="15" /><br />
email: <input type="text" name="email" size="15" /><br />
First name: <input type="text" name="first_name" size="15" /><br />
Last name: <input type="text" name="lirst_name" size="15" /><br />
<p><input type='submit' name='Submit' value='Submit' /></p>
</form>
I'm working with AJS for the first time and also REST for the first time, I'm unsure on how to link the form to the database to update. I'm unsure what needs to go in the controllers.js as well
Thanks
You could simply use the $http service.
First use ng-model to store fields value in an object :
<form ng-submit="send_form()" action="">
Username: <input type="text" name="username" size="15" ng-model="form.username" /><br />
Password: <input type="password" name="password" size="15" ng-model="form.password"/><br />
email: <input type="text" name="email" size="15" ng-model="form.email"/><br />
First name: <input type="text" name="first_name" size="15" ng-model="form.first_name"/><br />
Last name: <input type="text" name="lirst_name" size="15" ng-model="form.last_name"/><br />
<p><input type='submit' name='Submit' value='Submit' /></p>
</form>
And then use in your controller (or even better, through a service) :
function myController($scope, $http) {
$scope.send_form = function () {
$http.put('http://localhost:8080/CyberSolution/rest/user/register', $scope.form).success(successCallback);
}
}