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>
Related
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 am trying create forms inside ng-repeat, everything is working fine except submit button. Submit button placed in main form it is common for all sub forms.
If the submit button is clicked mainForm.$submitted gets updated but userForm.$submitted dose not changing. Is there any work around for that ?
angular.module("sampleApp", [])
.controller('sampleCtrl', function($scope) {
$scope.users = [{},{}];
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<div ng-app="sampleApp" ng-controller="sampleCtrl">
<form name="mainForm" novalidate>
<input type="text" name="school" ng-model="school" required>
main form input valid=>{{mainForm.school.$valid}}
<div ng-repeat="user in users">
<ng-form name="userForm">
<input type="text" ng-model="user.name" name="name" required>
sub form input valid=>{{userForm.name.$valid}} | sub form submit=>{{userForm.$submitted}}
</ng-form>
</div>
<button type="submit">Submit</button>
Form valid=>{{mainForm.$valid}} | Main From submit => {{mainForm.$submitted}}
</form>
</div>
Intro
So, I added a ng-click handler to the button so that you set the submitted status of the internal form as well.
The only difficult I had was to actually get the form reference, but I added the function $scope.setUserForm which is called with an ng-init. The solution pattern is from: https://stackoverflow.com/a/23862411/1688441
Also, please keep in mind you need an array of userForms to keep the references. On click you iterate through these elements and set the submitted.
Code
angular.module("sampleApp", [])
.controller('sampleCtrl', function($scope) {
$scope.UserForms = [];
$scope.setUserForm = function(form) {
$scope.UserForm = form;
$scope.UserForms.push(form);
}
$scope.forms = {};
$scope.users = [{}, {}];
$scope.handleClick = function() {
$scope.UserForms.forEach(function(element) {
element.$submitted = true;
});
};
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<div ng-app="sampleApp" ng-controller="sampleCtrl">
<form name="mainForm" novalidate>
<input type="text" name="school" ng-model="school" required>
input valid=>{{mainForm.school.$valid}}
<div ng-repeat="user in users">
<ng-form name="userForm">
<div ng-init="setUserForm(userForm);"></div>
<input type="text" ng-model="user.name" name="name" required>
input valid=>{{userForm.name.$valid}} | form submit=>{{userForm.$submitted}}
</ng-form>
</div>
<button type="submit" ng-click="handleClick()">Submit</button>
Form valid=>{{mainForm.$valid}} | From submit => {{mainForm.$submitted}}
</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'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
I have a form which inputs name of a country and then it overwrites a global variable. Submit button does nothing when clicked. Where am I missing?
Here is the HTML
<div ng-controller="InputController">
<form class="form-wrapper cf" role="form">
<input type="text" ng-model="model.country" placeholder="Search country..." required>
<button type="submit" ng-click="update()">Search</button>
<span>{{model.country}} ======</span>
</form>
</div>
And here is the controller.
LastFmApp.controller('InputController',
function InputController($scope) {
$scope.model = {};
$scope.update = function() {
console.log($scope.model.country);
};
});
I don't think it is an issue with angular js.
The submit button will reload the page so you won't be able to see changes in your model.
You can either use an input type button with ngClick:
<input type="button" ng-click="update()">Search</input >
Or an input type submit with ngSubmit attribute on your form:
<form ng-submit="update()">
<input type="submit">Search</input>
</form>
i dont think there is any issue with your code see your code is working in plunker
<div ng-controller="InputController">
<form class="form-wrapper cf" role="form">
<input type="text" ng-model="model.country" placeholder="Search country..." required>
<button type="submit" ng-click="update()">Search</button>
<span>{{model.country}} ======</span>
</form>
</div>
http://plnkr.co/edit/u9hqu1bASxxMgtEP1qAr?p=preview