Here's the form in html:
<form ng-submit="vm.setTest(test)">
<input type="text" ng-model="test" required />in USD
<input type="submit" value="Submit">
</form>
Here's the JavaScript:
var vm = this;
vm.setTest = setTest;
function setTest(test) {
alert(test);
}
Please note, that no $scope involved and should not be.
you will have to declare setTest like this
vm.setTest(test) {
alert(test);
}
Figure out. This is how now html looks:
<form ng-submit="testController.setTest(test)">
<input type="text" ng-model="test" required />in USD
<input type="submit" value="Submit">
</form>
Related
I have created an edit button and a form. I can't get my input disabled
until edit button is clicked. All I want to do is make input disabled and when the user clicks on the edit button they should be able to edit the text.
Here is my code:
<div ng-controller="MyCtrl">
<a class="edit" ng-click="inactive = !inactive">Edit</a>
<form>
<b>First Name:</b>
<input type="text" ng-disabled="inactive" ng-model="input1" value="John">
<br>
<b>Last Name:</b>
<input type="text" ng-disabled="inactive" value="Smith">
<br>
<b>Email:</b>
<input type="email" ng-disabled="inactive" value="jsmith#email.com">
</form>
</div>
App.js
function MyCtrl($scope) {
$scope.inactive = false;
}
You can add
ng-click="changeStatus()"
in you angular template.
the full code:
var app = angular.module("Portal", ['ngRoute']);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.inactive = true;
$scope.changeStatus = function() {
$scope.inactive = !$scope.inactive;
};
}]);
To fix your code, you have to invert your boolean variable:
function MyCtrl($scope) {
$scope.inactive = true;
}
But to disable whole form inputs in a cleaner way, put all your inputs inside a fieldset with ng-disabled and remove the ng-disabled from each input...
<form>
<fieldset ng-disabled="inactive">
<b>First Name:</b>
<input type="text" ng-model="name"><br>
<b>Last Name:</b>
<input type="text" ng-model="lastname"><br>
<b>Email:</b>
<input type="email" ng-model="email">
</fieldset>
</form>
I have a form in my html page:
<div id=update>
<form class="form-inline" ng-submit="updateCompany(company.companyId,company.companyName,company.newPassword,company.newEmail)" ng-show="updateForm">
<h3>Update Company</h3>
<div class="form-group">
<input type="text"
class="form-control" id="companyId" value={{company.companyId}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyName"
value={{company.companyName}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyPassword"
placeholder="Enter New Password" ng-model="company.newPassword"/>
</div>
<div class="form-group">
<input type="email"
class="form-control" id="companyEmail" placeholder="Enter New Email"
ng-model="company.newEmail" />
<button type="submit" class="btn btn-default">UPDATE</button>
</div>
</form>
</div>
I would like to show the current company values(id,name,password,email),
in the text fields, than give the user option to change the password and the email and send all the parameters when I submit the form.
The problem is when I put the ng-model on the text field, the current value disappears.
I need a fix for that!!!
In the first two fields I see the value now because I don't have the ng-model on them, once I put ng-model it disappear.
In your controller just attach the company data to scope like this:
$scope.company = yourcompanydata
And as for submitting the data, you don't have to list all the parameters in your html. In your html just leave:
ng-submit="updateCompany()"
And in your controller:
$scope.updateCompany = function(){
// your submitting logic here and all the company data will
// be available under $scope.company
// including the new password and email entered by the user
// so your submitting logic could look something like this:
submitCompanyData($scope.company.companyId, $scope.company.newPassword,...)
}
Here is a simple version codepen to get you started, depending what you'd like to do with data afterwords. I can update as needed.
angular
.module('app', [])
.controller('ExampleController', ExampleController);
function ExampleController() {
var vm = this;
vm.company = {};
vm.info = info;
function info(info) {
console.log(info);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='app'>
<div class="container" ng-controller="ExampleController as vm">
<form novalidate>
<input type="text" ng-model="vm.company.name" required/>
<input type="email" ng-model="vm.company.email" required/>
<input type="submit" ng-click="vm.info(vm.company)" value="Submit" />
</form>
{{vm.company| json}}
</div>
</body>
I will fetch User from the backend and therefore I will give in a name into an input field and then the Controller Method getUserByTerm will be invoked.
This works fine.
My question now would be, if the implementation is ok or is there an additional support of Angular that makes it easier? Currently the if(term.length > 3) looks very "Javascript- like".
Thanks for help!
angular
.module('project.management')
.controller('ManagementController', ManagementController);
function ManagementController() {
var vm = this;
vm.getUsersByTerm = getUsersByTerm;
function getUsersByTerm(term) {
if(term.length > 3) {
alert('get User By term: ' + term);
}
}
};
<div ng-controller="ManagementController as vm">
<form class="well form-search">
<label>Usersuche:</label>
<input type="text" ng-change="vm.getUsersByTerm(term)" ng-model="term" class="input-medium search-query" placeholder="Username">
<button type="submit" class="btn" ng-click="vm.getUsersByTerm(term)">Suchen</button>
</form>
<pre ng-model="result">
{{result}}
</pre>
</div>
You can add ng-maxlength="3" to your input and submit only if form is valid (https://docs.angularjs.org/api/ng/input/input%5Btext%5D)
Although, your code is quite simple and this might not be required.
<form class="well form-search" ng-submit-"vm.getUsersByTerm(term)">
<label>Usersuche:</label>
<input type="text" ng-change="vm.getUsersByTerm(term)"
ng-model="term" ng-maxlength="3" class="input-medium search-query" placeholder="Username">
<button type="submit" class="btn">Suchen</button>
</form>
I’m trying to log variable which is the model of inputbox, but it says undefined, here is the coffeescript code.
.controller('setupCtrl',[
'$scope'
($scope) ->
$scope.userAge = [{age: ''}]
console.log 2342424
$scope.addAge = ->
console.log($scope.age)
])
This is the HTML code
<form role="ageForm" data-ng-submit="addAge()" >
<div class="form-group">
<input type="text" ng-model="age" class="form-control" placeholder="Age" required>
</div>
{{input}} butona koyup data-ng-click dene istersen
<button type="submit" ng-click="addAge()">sdsadsdSave</button>
</form>
It says undefined for $scope.age
It looks like ng-model => userAge.age not age only
<form role="ageForm" data-ng-submit="addAge()" >
<div class="form-group">
<input type="text" ng-model="userAge.age" class="form-control" placeholder="Age" required>
</div>
{{input}} butona koyup data-ng-click dene istersen
<button type="submit" ng-click="addAge()">sdsadsdSave</button>
</form>
$scope.addAge = ->
console.log($scope.userAge.age)
Can someone please tell me why my validations are not working. I followed many blogs and can't seem to debug it on my own.
<body data-ng-app="testapp">
<div data-ng-controller="testCtrl">
<h1>Test {{name}}!!</h1>
<form name="loginForm" action="login" novalidate>
<input type="email" name="email" placeholder="email" required/>
<input type="password" name="password" placeholder="password" required/>
<button type="submit" ng-disabled="loginForm.$invalid">Login</button>
<p ng-show="loginForm.$invalid">Please fix your form.</p>
<p ng-show="loginForm.email.$invalid">Please fix your email.</p>
<p ng-show="loginForm.password.$invalid">Please fix your password.</p>
</form>
</div>
<script>
var testapp = angular.module('testapp', []);
var testCtrl = function($scope) {
$scope.name = 'validation';
};
</script>
http://jsfiddle.net/xFnx8/3/
In order for Angular to track changes on form inputs, they need to be defined as ng-model properties on the scope.
So, your demo will work if you add the appropriate ng-model attributes:
<body data-ng-app="testapp">
<div data-ng-controller="testCtrl">
<h1>Test {{name}}!!</h1>
<form name="loginForm" action="login" novalidate>
<input type="email" name="email" ng-model="email" placeholder="email" required/>
<input type="password" name="password" ng-model="passowrd" placeholder="password" required/>
<button type="submit" ng-disabled="loginForm.$invalid">Login</button>
<p ng-show="loginForm.$invalid">Please fix your form.</p>
<p ng-show="loginForm.email.$invalid">Please fix your email.</p>
<p ng-show="loginForm.password.$invalid">Please fix your password.</p>
</form>
</div>
<script>
var testapp = angular.module('testapp', []);
var testCtrl = function($scope) {
$scope.name = 'validation';
};
</script>
Here is a working fiddle.
http://jsfiddle.net/6DzR5/
Yo, I fixed your fiddle.
You need to add your inputs as ng-model:
<input type="email" name="email" placeholder="email" data-ng-model="email" data-ng-required="true"/>
<input type="password" name="password" placeholder="password" data-ng-model="password" data-ng-required="true"/>
You must add an ng-model to your inputs so the form validation of angular can kick in.
Javascript
var testapp = angular.module('testapp', []);
var testCtrl = function ($scope) {
$scope.name = 'validation';
$scope.user = {};
};
HTML modification
<input type="email" name="email" placeholder="email" ng-model='user.email' required/>
<input type="password" name="password" placeholder="password" ng-model='user.password' required/>
Working demo