I need am not able to access the $scope.mainform.subform.submitted property in my script. My html goes as below.
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
#*Same goes for other personal details*#
<input type="button" id="submitbutton" value="Save" ng-model="Submit" ng-click="saveDependentDetailsClick($event, $index, dependent)" />
</ng-form>
</div>
</div>
Can anyone help?
First of all, I think that it's not correct to use <ng-form name="subform">...</div> in ng-repeat in a way you have used it because you will end up with multiple forms having same name(subform) within the same scope therefore you can't refer to each of these forms as they have not unique name providing you with reference to them.
You will also end up with multiple submit buttons with the same id="submitbutton" in same html document which is an invalid html.
try this.
var app = angular
.module('MyApp', [
])
.controller('Main', ['$scope', function ($scope) {
$scope.DependentDetails = [{"FirstName":""},{"FirstName":""}];
$scope.saveDependentDetailsClick = function(DependentDetails){
console.log(DependentDetails);
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
<input type="button" value="Save" ng-click="saveDependentDetailsClick(dependent)" />
</ng-form>
</div>
</div>
</div>
Related
I have ng-if conditions in two levels. if the first condition in the first div satisfy the second div should be displayed. Similarly, if the second ng-if satisfies the third div should be displayed. But I can able to see only the second div.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div><input type="number" ng-model="temp"></div>
<div ng-if="temp>40">
<input type="radio" ng-click="temp2=true">Yes
<input type="radio" ng-click="temp2=false">No
</div>
<div ng-if="temp2">
<p>Some content</p>
</div>
The last div displays if I use ng-show. But I must not use ng-show. There are some more divs which work based on these conditions. Please help me in this regard
Because the ng-if create new scope. Try this one.
<div><input type="number" ng-model="temp"></div>
<div ng-if="temp>40">
<input type="radio" ng-click="temp2=true">Yes
<input type="radio" ng-click="temp2=false">No
<div ng-if="temp2">
<p>Some content</p>
</div>
</div>
Edit
It's better use controllerAs syntax.
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
var vm = this;
vm.setTemp2 = function(){
vm.temp > 40 && vm.temp2 ? vm.temp2= true : vm.temp2=false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl as vm">
<div><input type="number" ng-model="vm.temp" ng-change="vm.setTemp2(vm.temp)" ></div>
<div ng-if="vm.temp>40">
<input type="radio" name="content" ng-click="vm.temp2=true">Yes
<input type="radio" name="content" ng-click="vm.temp2=false">No
</div>
<div ng-if="vm.temp2">
<p>Some content</p>
</div>
</div>
No need to use ng-click, you can just bind the value of radio button with the model using ng-model.
There are actually two problems:
The ng-if create a new scope. So you need to put your second ng-if code inside the parent ng-if.
And you did not give the name property to your radio button which is necessary.
Updated Code:
Just replace your code with the below one..
<div ng-app="">
<div><input type="number" ng-model="temp"></div>
<div ng-if="temp>40">
<input type="radio" name="content" ng-model="temp2" value="true">Yes
<input type="radio" name="content" ng-model="temp2" value="false">No
<div ng-if="temp2=='true'">
<p>Some content</p>
</div>
</div>
</div>
This is because ng-if creates a new child scope. This can be avoided by binding the property to an object. By using ., the property will be directly binded to the parent and not the child scope which is created in ng-if. You don't have to restructure all the divs.
var myApp = angular.module('myApp', []);
myApp.controller('ctrl', ['$scope', function ($scope) {
$scope.temp2={};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<body ng-app="myApp" ng-controller="ctrl">
<div ><input type="number" ng-model="temp"></div>
<div ng-if="temp>40">
<input type="radio" ng-click="temp2.val=true">Yes
<input type="radio" ng-click="temp2.val=false">No
</div>
<div ng-if="temp2.val&&temp>40">
<p>Some content</p>
</div>
</body>
For more Info : What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
This can also be avoided by using controllerAs syntax as mentioned by #Hadi. controllerAs syntax will take care of the dot rule.
I have a form named myform & I'm trying to set ng-disabled with this code:
ng-disabled="myForm.$invalid"
but both myForm.$invalid & myForm.$valid are undefined. What is the issue exactly? I checked in console & myForm is correctly set to the form.
UPDATE
<form id="commissionForm" name="myForm" class="form-horizontal">
<div class="form-group">
<div class="col-sm-8 col-md-8 col-lg-8 col-xs-8" />
<div class="col-sm-2 col-md-2 col-lg-2 col-xs-2" >
<button name="NextBtn" id="NextBtn"
ng-class="{disabled:commissionForm.$invalid}"
ng-disabled="myForm.$invalid"
ng-click="nextBtnClicked()" class="btn btn-primary"
>Next</button>
</div>
</div>
</form>
You need to change 'myForm' to 'commisionForm' to make it work. Also, your form needs to have at least one element that binds to the model, using ng-model. Otherwise, validation will not fire.
Working code sample:
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<form id="commissionForm" name="commissionForm" class="form-horizontal">
<div>form $valid: {{commissionForm.$valid}}</div>
<div>form $invalid: {{commissionForm.$invalid}}</div>
<div>An input box with max length 5, to make the form invalid:</div>
<input ng-maxlength="5" ng-model="somemodel"/>
<div class="form-group">
<div class="col-sm-8 col-md-8 col-lg-8 col-xs-8" />
<div class="col-sm-2 col-md-2 col-lg-2 col-xs-2">
<button name="NextBtn" id="NextBtn" ng-class="{disabled:commissionForm.$invalid}" ng-disabled="commissionForm.$invalid" ng-click="nextBtnClicked()" class="btn btn-primary">Next</button>
</div>
</div>
</form>
</div>
If you want to utilize angular's built in form validation check out angular's documentation on the form directive:
https://docs.angularjs.org/api/ng/directive/form
<form name="myForm" ng-controller="FormController" class="my-form">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
<code>userType = {{userType}}</code><br>
<code>myForm.input.$valid = {{myForm.input.$valid}}</code><br>
<code>myForm.input.$error = {{myForm.input.$error}}</code><br>
<code>myForm.$valid = {{myForm.$valid}}</code><br>
<code>myForm.$error.required = {{!!myForm.$error.required}}</code><br>
</form>
Take note that the form name attribute should map to the angular validation services. Looks like you didn't change that in your code.
myForm is undefined because according to your code the name of your form is commissionForm not myForm. From the code you provided.
This is my Fiddle.
http://jsfiddle.net/0c5p38dt/1/
In the above fiddle use ng-model in textfield and add save button
<input type="text" ng-model="eachItem.value"/>
<input type="button" value="save" ng-click="save()"/>
and i write code in js file :-
$scope.save=function(){
console.log($scope.data);
};
In the above code first i click add button when i enter data in first textfield(name) that will also effect on second textfield(name). I want to save the data . So how to differentiate these textboxes.
you should use a 'name' attribute in your input fields with angular
$index
on ng-repeat.
in your Fiddle:
<div ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="eachItem in data">
<input type="button" value="add" ng-click="addFields(eachItem)"/>
<label>{{eachItem.label}}</label>
<input type="text" name="eachItem.label[$index]" />
</div>
</div>
</div>
The result would be like:
<input type="text" name="email[1]">
<input type="text" name="email[2]">
<input type="text" name="email[3]">
<input type="text" name="name[1]">
<input type="text" name="name[2]">
I'm not completely sure what you want, but I don't think you want the <input> in an ng-repeat, maybe what you want is in your .html:
<div ng-app>
<div ng-controller="Ctrl">
<label>Name</label>
<input type="text"ng-model="item.name"/>
<label>Email</label>
<input type="text"ng-model="item.email"/>
<input type="button" value="add" ng-click="addFields(item)"/>
<div ng-repeat="item in data">
<div ng-bind="item.name"></div>
<div ng-bind="item.email"></div>
</div>
</div>
</div>
and in your .js:
function Ctrl($scope) {
$scope.data=[];
$scope.addFields = function (item) {
$scope.data.push(item);
};
}
This will give you the inputs once and then keep track (and display) the data from the inputs
I am trying to learn angularJS and have problem figuring out how to solve this issue. I am trying to prepend content of the form when user submit the form. This is my code but it's not working. Can anyone help me to figure out where the problem is? Thanks!
angular.module("displayText", [])
.controller("submitText", function($scope) {
$scope.outputArr = [];
$scope.print = function() {
$scope.outputArr.push($scope.inputText);
$scope.inputText = '';
};
};
});
<body ng-app="displayText">
<div ng-controller="submitText">
<form method="get" action="#">
<input type="text" name="input" ng-model="inputText" required/>
<button ng-click="print(inputText)">Submit</button>
</form>
</div>
<div>
<p ng-repeat="text in outputArr">{{text}}</p>
</div>
</body>
put this piece of code inside the submitText controller div
<div>
<p ng-repeat="text in outputArr">{{text}}</p>
</div>
then you whole code should be like
<div ng-controller="submitText">
<form method="get" action="#">
<input type="text" name="input" ng-model="inputText" required/>
<button ng-click="print(inputText)">Submit</button>
</form>
<div>
<p ng-repeat="text in outputArr">{{text}}</p>
</div>
</div>
here is the Plunker
in your case the ng-repeat="text in outputArr" is out of the controller that means scope of the submitText controller not accessible for the ng-repeat that's why its not print anything
I know that there are a lot of other similar questions but I didn't find the answer there.
<html ng-app="app" ng-controller="AppController">
...
<form class="navbar-form navbar-left" role="search" ng-submit="alert()">
<div class="form-group">
<input type="text" class="form-control search" ng-model="text" />
</div>
<button type="submit" class="btn btn-default icon-default icon-search">Submit </button>
</form>
</html>
You cant use alert (window.alert) function in angular as you normally do in plain javascript. This is example from angular $window service docs:
<script>
function Ctrl($scope, $window) {
$scope.greeting = 'Hello, World!';
$scope.doGreeting = function(greeting) {
$window.alert(greeting);
};
}
</script>
<div ng-controller="Ctrl">
<input type="text" ng-model="greeting" />
<button ng-click="doGreeting(greeting)">ALERT</button>
</div>
If you put doGreeting (name it as you want) function in your controller and inject $window, then your example should work:
...
<form class="navbar-form navbar-left" role="search" ng-submit="doGreeting()">
...
Try to submit the form by adding ng-click in the button tag and call submit function by passing your form in the ng-click. The function is where you write your logic in the controller. submit