I'm starting with Angular and I'm still very confused with syntax and the many different ways I can code to get the same result.
My latest problem is that when I submit a form, I can't get its values by doing $scope.attribute_name
HTML
<body ng-app="myApp">
<div ng-include src="'menu.html'"></div>
<div id="container" ng-controller="MainController">
<div ui-view></div>
</div>
</div>
login.html (included by Route)
<form name="form" name='' action="" ng-submit='login($event)'>
<input type="text" name='username' ng-model='username' required />
<input type="text" name='password' ng-model='password' required />
<button>Enviar</button>
</form>
JS
var app = angular.module('myApp', ['ui.router']);
app.controller('MainController',['$scope',function($scope){
$scope.login = function ($event){
alert($scope.username)
$event.preventDefault();
}
}]);
It always alert "undefined"
I can get the values by doing the following
$event.target.username
Just like on Meteor.
Any ideas?
#edit1
I added user as the model's object
HTML
<form name="form" name='teste' action="" ng-submit='login($event)'>
<input type="text" name='username' ng-model='user.username' required />
<input type="text" name='password' ng-model='user.password' required />
<button>Enviar</button>
</form>
JS
app.controller('MainController',['$scope',function($scope){
$scope.login = function ($event){
alert($scope.user.username)
}
}]);
I still get undefined though
<form name="form" name='teste' action="" ng-submit='login()'>
<input type="text" name='username' ng-model='user.username' required />
<input type="text" name='password' ng-model='user.password' required />
<button>Enviar</button>
</form>
define your $scope inside the controller as below. Because attributes are registered to the $scope of the controller when the controller initializes.
app.controller('MainController',['$scope',function($scope){
$scope.user={}; //DEFINE $scope variable if dot is given to variable.
$scope.login = function (){
alert($scope.user.username)
}
}]);
Thanks
Related
I currently have a form with many different inputs. In the example below I have created a form with two inputs for simplicity. I am trying to make it so my submit button is disabled when the form isn't valid - that is, when all the required inputs have not been filled out.
This is what I have tried so far:
angular.module('myApp', []);
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<form name="myForm">
<input type="text" placeholder="name" required/>
<input type="number" placeholder="age" required />
<input type="submit" ng-disabled="myForm.$invalid" />
{{ myForm.$invalid }} <!-- prints "false" -->
</form>
As you can see from the above snippet, myForm.$invalid is false even though I haven't filled out the required inputs yet. Is there some different property which will tell me if the required inputs have all been filled out?
I have looked at different posts such as this one but when I try and use myForm.$valid it just gives me the negated version of myForm.$invalid, which doesn't help much either.
You are missing ng-model in the form fields. You need to add ng-model as it detects the changes in the form fields.
Try this:
angular.module('myApp', []);
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<form name="myForm">
<input type="text" ng-model="name" placeholder="name" required/>
<input type="number" ng-model="age" placeholder="age" required />
<input type="submit" ng-disabled="myForm.$invalid" />
{{ myForm.$invalid }} <!-- prints "false" -->
</form>
I have this html page:
<div class="rtm-nav">
<div ng-app>
<body ng-controller="DemandCtrl" ng-submit="submit()">
<label>From:
<input type="text" name="input" ng-model="ctrl.dataa.from">
</label>
<label>To:
<input type="text" name="input" ng-model="ctrl.dataa.to">
</label>
<input type="submit" id="submit" value="Apply" />
<script src="demand/demand.js"></script>
</body>
</div>
</div>
I want to save the input text from the 2 text boxes in the controller's scope. This is how I tried to do it:
class DemandCtrl {
constructor(ChartDataService) {
this.ChartDataService = ChartDataService;
debugger;
this.dataa = {
from: ctrl.dataa.from,
to: ctrl.dataa.to
};
}
$onInit() {
getData.call(null, this);
}
}
I get the error saying:
ReferenceError: ctrl.dataa is not defined
Is any better method to send the data from input text to the controller?
You haven't defined scope which is accepted by your controller. That's why you can't read data from the form. I would also suggest to use <form> to deal with any kind of data submission. So take a look at the refactored example of yours:
==== HTML ======
<div class="rtm-nav">
<div ng-app="my-app">
<form ng-submit="submit()" ng-controller="DemandCtrl">
<label>From:
<input type="text" name="input" ng-model="ctrl.data.from">
</label>
<label>To:
<input type="text" name="input" ng-model="ctrl.data.to">
</label>
<input type="submit" id="submit" value="Apply" />
</form>
</div>
</div>
===== Controller
angular.module('my-app', [])
.controller('DemandCtrl', function($scope) {
$scope.submit = function() {
let data = {
from: $scope.ctrl.data.from,
to: $scope.ctrl.data.to,
}
console.log(data);
};
});
I have two forms(in one page). On first form there are two buttons NEXT and BACK. On clicking on the next i will render next form on page. I am using ng-if for this condition.
<form name="otpform" novalidate ng-if="renderotpform">
<fieldset ng-disabled="otpdisable">
<div class="middle-container steps fourth-step overflow-hidden" id="divotp">
<input class="" type="text" name="otp" placeholder="{{ 'OTP' | translate }}" ng-model="otp" required >
<input type="button" value="{{ 'BACK' | translate }}" class="brown-button" ng-click="gotoAck()">
<input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="checkotp()">
</div>
</fieldset>
</form>
Below is my js code.
$scope.checkotp = function () {
debugger;
var otpvalue;
$scope.otp = {};
otpvalue = $scope.otp; //undefined
}
When I try to access the otp model I am getting undefined property. On previous form I have next button. Inside next button I have $scope.renderotpform = true; so that above form is shown. May I know why I am not able to access OTP in the above code?
ng-if creates its own scope. So the otp inside ng-if is not binded directly to the controller.You can either bind the model to an object or use controller as syntax. The controller as syntax implicitly takes care of the dot rule.
For more info:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
AngularJs "controller as" syntax - clarification?
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var vm=this;
vm.renderotpform = true;
vm.checkotp = function() {
console.log(vm.otp);
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<form name="otpform" novalidate ng-if="vm.renderotpform">
<fieldset ng-disabled="otpdisable">
<div class="middle-container steps fourth-step overflow-hidden" id="divotp">
<input class="" type="text" name="otp" ng-model="vm.otp" required>
<input type="button" value="BACK" class="brown-button" ng-click="vm.gotoAck()">
<input type="submit" value="NEXT" class="blue-button" ng-click="vm.checkotp()">
</div>
</fieldset>
</form>
</div>
Make all ng-models of the Form from one Object..
It would work and there are other advantages for this like you could easily reset and post data with just one object.:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.formData = {};
$scope.renderotpform = true;
$scope.checkotp = function() {
console.log($scope.formData.otp);
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="otpform" novalidate ng-if="renderotpform">
<fieldset ng-disabled="otpdisable">
<div class="middle-container steps fourth-step overflow-hidden" id="divotp">
<input class="" type="text" name="otp" ng-model="formData.otp" required>
<input type="button" value="BACK" class="brown-button" ng-click="gotoAck()">
<input type="submit" value="NEXT" class="blue-button" ng-click="checkotp()">
</div>
</fieldset>
</form>
</div>
My form is very simple. Think of it as having 1 field and one submit button. The validation I want is also quite simple, if the 1 field is empty, then the submit button will be disabled. If not, the submit button will work. I am trying to do this dynamically using AngularJs and not quite sure what I am missing.
Although I am using Django-forms, my form renders in Html like this:
<div ng-app="myApp" ng-controller="searchController">
<form method='POST' action='' class="form-with-blue-labels" name="searchForm">
{% csrf_token %}
<input class="textinput textInput form-control" id="id_professor_name" maxlength="255" name="professor_name" placeholder="Search for a professor" required="required" type="text">
<input ng-disabled="disabled_bool" type="submit" class="btn btn-primary" value="Search" />
</form>
</div>
And my angular file looks like this:
angular.module('myApp', [])
.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{$');
$interpolateProvider.endSymbol('$}');
})
.controller('searchController', [
'$scope', function($scope) {
var search_target = angular.element('#id_professor_name');
if (search_target == ''){
$scope.disabled_bool = true;
}
}
])
Note: Since I am using Django and Angular together in a non-restful way, I changed the angular tags to be {$$}, while Django tags are {{}}.
Any help is appreciated!
EDIT
I have tried this now, and still can't get it to work :/
<div ng-app="myApp" ng-controller="searchController">
<form method='POST' action='' class="form-with-blue-labels" name="searchForm">
{% csrf_token %}
<input ng-change="change()" class="textinput textInput form-control" id="id_professor_name" maxlength="255" name="professor_name" placeholder="Search for a professor" required="required" type="text">
<input ng-disabled="disable_button" type="submit" class="btn btn-primary" value="Search" />
</form>
</div>
using this function
angular.module('myApp', [])
.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{$');
$interpolateProvider.endSymbol('$}');
})
.controller('searchController', [
'$scope', function($scope){
$scope.change = function(){
if (angular.element('#id_professor_name').length == 0) {
$scope.disable_button = true;
}
else {
$scope.disable_button = false;
}
};
}
])
As suggested here, you need to use ng-disabled="searchForm.$invalid" as you have already set name to required.
I have a form like :
<form name="myform">
<input type="text" name="input" />
</form>
But my input is not available in $scope.myform.input and neither by {{ myform.input }}. I tried to add a ng-minlength:
<form name="myform" novalidate>
<input type="text" name="input" ng-minlength="10" />
</form>
And even by typing something shorter than 10, myform is still valid. It's like the input is not part of the form at all.
Here is an example hosted on jsfiddle: http://jsfiddle.net/saag0agc/
AngularJS Documentation on input text: https://docs.angularjs.org/api/ng/input/input%5Btext%5D
You need an ng-model attribute. For example:
<form name="myform">
<input type="text" name="input" ng-model="input" />
</form>
Then you can access the content via:
{{ input }}
Although I would suggest using a name/model other than input.
The ng-model property is missing on the input.
<form name="myform">
<input type="text" name="input" ng-model="myform.input" />
</form>