<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script>
var app = angular.module('sampleapp', []);
app.controller('samplecontroller', ["$scope", function($scope) {
$scope.itemsToPush=[{amount:'',percentage:''}];
$scope.myFunction = function() {
$scope.itemsToPush.push({
amount:'',
percentage:''
})
};
}]);
</script>
</head>
<body ng-app="sampleapp" ng-controller="samplecontroller">
<div class="test" ng-repeat="items in itemsToPush">
<div class="form-group" style="margin-top: 20px;">
<label class="checkbox-inline">
<input type="radio" name="amount" value="amount" ng-model="items.amount"> Reduction Amount
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;">
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="radio" name="percentage" value="percentage" ng-model="items.amount"> Reduction Percentage
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;">
</label>
</div>
</div>
<div>
<button class="btn btn-secondary" type="button" ng-click="myFunction()">Go!</button>
</div>
</body>
</html>
Hi. I am working in angularjs. I have a div which contains two radio buttons(only one can be selected). I have a button called Go.On click Go i need to dynamically add the Radio div.The problem i am facing is when the div gets added,i am able to select only one radio from both(original and replicated) the divs.I need to select one radio button from each div. Thanks in advance.
Here's https://plnkr.co/edit/cLemG02uFyQupG7h74WM?p=preview
Hope I am understanding this correctly. Correct me if I am wrong.
You want each row to have two options.
1. Amount
2. Percentage
Of these only one can be selected.
To achieve this you need to have the same name attribute for both radio buttons.
<div class="form-group" style="margin-top: 20px;">
<label class="checkbox-inline">
<input type="radio" name="reductionType" value="amount" ng-model="items.amount"> Reduction Amount
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;">
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="radio" name="reductionType" value="percentage" ng-model="items.amount"> Reduction Percentage
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;">
</label>
</div>
Now based on the item selected you will have either amount or percentage in the items.amount binding.
If you want multiple rows of this then you should use different names for each row. For this the $index variable would be useful.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script>
var app = angular.module('sampleapp', []);
app.controller('samplecontroller', ["$scope", function($scope) {
$scope.itemsToPush=[{amount:'',percentage:''}];
$scope.myFunction = function() {
$scope.itemsToPush.push({
amount:'',
percentage:''
})
};
}]);
</script>
</head>
<body ng-app="sampleapp" ng-controller="samplecontroller">
<div class="test" ng-repeat="items in itemsToPush">
<div class="form-group" style="margin-top: 20px;">
<label class="checkbox-inline">
<input type="radio" name="reductionType_{{$index}}" value="amount{{" ng-model="items.amount"> Reduction Amount
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;">
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="radio" name="reductionType_{{$index}}" value="percentage" ng-model="items.amount"> Reduction Percentage
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;">
</label>
</div>
</div>
<div>
<button class="btn btn-secondary" type="button" ng-click="myFunction()">Go!</button>
</div>
</body>
</html>
The reductionType_{{$index}} creates a new radio button group for each iteration hence making only one clickable. (generates reductionType_0, reductionType_1 and so on)
<div class="test" ng-repeat="items in itemsToPush">
<div class="form-group" style="margin-top: 20px;">
<label class="checkbox-inline">
<input type="radio" name="reduction{{[$index]}}" value="amount" ng-model="items.amount"> Reduction Amount
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;">
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="radio" name="reduction{{[$index]}}" value="percentage" ng-model="items.amount"> Reduction Percentage
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;">
</label>
</div>
you need to make same names of checkbox of one and add {{[%index]}},so on every increment each div has its own names of checkboxes
Related
After AngularJS update to 1.8, once I click and call DayTypechange(2) method, the radio button value does not update. Here is my html:
<div class="btn-group btn-group-sm col-xs-11 col-md-10 select topmargine">
<div class="col-xs-6 col-sm-6 select">
<input type="radio" name="response" ng-model="fullDay" ng-click='DayTypechange(1)' ng-class="{selected: fullDay}" class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="wholeDay" ng-value="'1'" />
<label class="col-xs-10 formtextNormal" for="wholeDay">Whole day(s)</label>
</div>
<div class="col-xs-6 select">
<input type="radio" name="response" ng-model="fullDay" ng-click='DayTypechange(2)' ng-class="{selected: !fullDay}" class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="partDay" ng-value="'0'" />
<label class="col-xs-10 formtextNormal" for="partDay">Part day</label>
</div>
</div>
You should consider using ng-change for input clicks like checkboxes, radios and selects.
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.confirmed = "No"
$scope.change = function() {
console.log('radio clicked of value ', $scope.confirmed)
};
}]);
<html ng-app='changeExample'>
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script></head>
<body ng-controller="ExampleController">
<label><input type="radio" ng-model="confirmed" value="Yes" ng-change="change()" name='changer' /> Yes</label>
<label><input type="radio" ng-model="confirmed" name='changer' value="No" ng-change="change()" />NO</label>
<hr><div>Current radio = {{confirmed}}</div>
</body></html>
I want to select multiple radio options.New to angularjs.
Steps to produce the issue:
Select any country from the 1st select menu -> Choose Reason A
Select any country from the 2nd select menu -> Choose Reason C
here the above Reason A option disappears and only Reason C is selected.
i want to hold the two different reasons for different countries section.
here is the fiddle
http://jsfiddle.net/Lini7/knfsv64m/8/
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.showReasonA = function showReasonA(checkNoTin) {
console.log("print the notin value from data",this.item.noTin);
if (!this.item.country) return false;
var selectedCountry = this.item.country.country.toLowerCase();
var fourCountries = ["cayman islands", "albania"]
var isIt = fourCountries.indexOf(selectedCountry) >= 0;
console.log("print match country val",isIt);
console.log("get checknotin value before assign",checkNoTin);
if (checkNoTin) this.item.noTin = true;
console.log("final checknotin val",checkNoTin);
return isIt;
}
});
and the view
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<select name="country_0" ng-model="item.country" ng-options="" required="required" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" style=""><option value="" selected="selected"></option><option label="AFGHANISTAN" value="object:835">AFGHANISTAN</option><option label="cayman islands" value="object:836">cayman islands</option><option label="ALBANIA" value="object:837">ALBANIA</option><option label="ALGERIA" value="object:838">ALGERIA</option><option label="AMERICAN SAMOA" value="object:839">AMERICAN SAMOA</option></select>
<div class="row">
<label class="checkbox">
<input type="checkbox" ng-model="item.noTin" ng-disabled="item.tin" ng-checked="showReasonA(true)" ng-required="item.noTin" name="checkboxNoTin"/>
</label><span translate="transactions.changeAddress.crs.yes.me_no_tin" style="margin-top: 10px" class="col-value"></span>
</div>
<div ng-if="item.noTin" class="row">
<div class="col padding-top-xs"><span translate="transactions.changeAddress.crs.select_reason" style="margin-bottom: 12px;" class="pol-value col-value"></span>
<div ng-if="item.country.tin == true" ng-init="item.reason = 0" class="row margin-bottom-medium">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="A" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason1"></span>
</label>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="B" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason2_title"></span>
<label class="item item-input input-margin">
<textarea ng-model="item.othersReason" ng-required="item.reason == 2" rows="5"></textarea>
</label>
</label>
</div>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="C" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason3"></span>
</label>
</div>
</div>
</div>
</div>
<select name="country_0" ng-model="item.country" ng-options="" required="required" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" style=""><option value="" selected="selected"></option><option label="AFGHANISTAN" value="object:835">AFGHANISTAN</option><option label="cayman islands" value="object:836">cayman islands</option><option label="ALBANIA" value="object:837">ALBANIA</option><option label="ALGERIA" value="object:838">ALGERIA</option><option label="AMERICAN SAMOA" value="object:839">AMERICAN SAMOA</option></select>
<div class="row">
<label class="checkbox">
<input type="checkbox" ng-model="item.noTin" ng-disabled="item.tin" ng-checked="showReasonA(true)" ng-required="item.noTin" name="checkboxNoTin"/>
</label><span translate="transactions.changeAddress.crs.yes.me_no_tin" style="margin-top: 10px" class="col-value"></span>
</div>
<div ng-if="item.noTin" class="row">
<div class="col padding-top-xs"><span translate="transactions.changeAddress.crs.select_reason" style="margin-bottom: 12px;" class="pol-value col-value"></span>
<div ng-if="item.country.tin == true" ng-init="item.reason = 0" class="row margin-bottom-medium">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="A" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason1"></span>
</label>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="B" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason2_title"></span>
<label class="item item-input input-margin">
<textarea ng-model="item.othersReason" ng-required="item.reason == 2" rows="5"></textarea>
</label>
</label>
</div>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="C" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason3"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
To make some input as hidden you can use
<p ng-show="condition">I'm shown</p>
and this condition value should be initialized in the scope of your controller
$scope.condition=true/false
to hide an show input you can use ng-if. Its better to use ng-if for dynamic inputs . see details here
Now for your case you can use item.reason in the condition to show and hide your input .
<input type="radio" name="reason" ng-model="item.other" ng-value="C" required="required" ng-if="item.reason='object:836'" />
Finally got the solution
I just added the radio button name with index then it worked which will give different names for each group of buttons.
name='reason_{{$index}}'
I need one example for validations on dynamic added fields. Here is my page.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js">
</script>
<title>Add Remove in AngularJS</title>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.deleted = [];
$scope.inputs = [];
$scope.addRow = function(){
$scope.inputs.push({name:'', age:''});
};
$scope.removeRow = function(index, input){
// alert(index);
// alert(input);
$scope.deleted.push(input);
$scope.inputs.splice(index,1);
};
});
</script>
</head>
<body style="background-color: gray; margin-top: 10px; ">
<center>
<div class="row" ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-6">
<div class="panel panel-flat">
<div class="panel-header">
<h4>
Person Address
<button ng-click="addRow()">Add</button>
</h4>
</div>
<div class="panel-body">
<form name="form" class="form-horizontal">
<div ng-repeat="input in inputs">
<div class="form-group" ng-class="{'has-error' : form.name.$invalid}">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name[$index]" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span class="help-block" ng-show="form.name[$index].$error.pattern">Alphabet only</span>
<span class="help-block" ng-show="form.name[$index].$error.minlength">Too Short</span>
<span class="help-block" ng-show="form.name[$index].$error.maxlength">Too Long</span>
<span class="help-block" ng-show="form.name[$index].$error.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span ng-show="form.age.$invalid && form.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button ng-click="removeRow($index, input)">Remove</button>
<hr>
</div>
</form>
</div>
</div>
</div>
<!-- inputs :{{inputs}}<br>deleted : {{deleted}} -->
</div>
</center>
</body>
</html>
You can add a fonction to you controller :
app.controller('myCtrl', function($scope) {
//...
$scope.validationFn = function () {
//do you validation here
};
then you just need to modify
<form name="form" class="form-horizontal" ng-submit="validationFn()">
Here is the answer:
<div class="panel-body"><form name="form" class="form-horizontal">
<div ng-repeat="input in inputs"><ng-form name="sfIn"><div class="form-group" >
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span
class="help-block" ng-show="sfIn.name.$error.pattern">Alphabet only</span>
<span
class="help-block" ng-show="sfIn.name.$error.minlength">Too Short</span>
<span
class="help-block" ng-show="sfIn.name.$error.maxlength">Too Long</span>
<span
class="help-block" ng-show="sfIn.name.$touched.required || sfIn.name.$error.required ||
sfIn.name.$dirty.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span
ng-show="sfIn.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button
ng-click="removeRow($index, input)">Remove</button>
</ng-form>
<hr>
</div>
</form>
</div>
in my code buttons are created correctly but after typing the first row,click Add fields.the close button is disabled in first row.but i want only disable in current typing row.other close buttons are enable.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="okay.js">
</script>
</head>
<body ng-app="testApp">
<div ng-controller="MainCtrl">
<form name="frm" class="form-inline" novalidate>
<div class="form-group">
<input type="string" name="cat_name" class="form-control" ng-model="cat_name" placeholder="Enter Category Name" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="text" name="cat_desc" class="form-control" ng-model="cat_desc" placeholder="Enter Your Description" ng-pattern="/^[a-zA-Z]*$/" required>
</div> <br>
<fieldset data-ng-repeat="choice in choices track by $index ">
<br>
<div class="form-group"> <input type="text" ng-model="choice.itemName" class="form-control" name="item_name" placeholder="Category Item Name" ng-pattern="/^[a-zA-Z]*$/" required>
<div class="form-group">
<input type="text" ng-model="choice.itemDesc" class="form-control" name="item_desc" placeholder="Category Description" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="number" ng-model="choice.itemView" class="form-control" name="item_count" ng-pattern="/^[0-9]/"placeholder="Category Item View Count" required>
<p class="help-block" ng-show="frm.item_count.$error.pattern">numbers only allowed</p>
<select id="country" ng-model="choice.states" name="state" ng-options="country for (country, states) in countries">
</div>
<div class="form-group">
<option value=''>Choose</option>
</select>City:
<select id="state" ng-disabled="!choice.states" name="city" ng-model="one">
<option value="">Choose</option>
<option ng-repeat="state in choice.states" value="{{state.id}}">{{state.city}}</option>
</select>
</div>
<button ng-click="removeChoice()" class="remove btn btn-danger" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.item_name.$invalid||frm.item_desc.$invalid">close</button>
</fieldset>
<br>
<button class="addfields btn btn-success" ng-click="addNewChoice()" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.item_name.$invalid||frm.item_desc.$invalid">Add fields</button>
<button class="addfields btn btn-success" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.item_name.$invalid||frm.item_desc.$invalid " >Save</button>
<span class="help-block" style="color:red"ng-show="frm.cat_desc.$error.pattern" style:"color:red">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red"ng-show="frm.item_desc.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red"ng-show="frm.cat_name.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block"style="color:red" ng-show="frm.item_name.$error.pattern">ERROR:<BR/>text only allowed</span > </div>
<div id="choicesDisplay">
{{ newItemNo }}
</div>
</form>
</div>
</body>
</html>
okay. js (angular File)
var app=angular.module('testApp', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
$scope.choices.splice(this.$index,1);
};
$scope.countries = {
'Andhra': [{
'id': '01',
'city': "Guntur"
}, {
'id': '02',
'city': "Hyderabad"
}],
'Tamilnadu': [{
'id': '03',
'city': "CBE"
}, {
'id': '04',
'dep': "Trichy"
}]
};
});
You had a few issues in your HTML that I cleaned up but primarily your issue was that you needed to perform your validation on just the current row. So you can add an ng-form attribute along with your ng-repeat to create a scope per row. The resulting HTL looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="okay.js"></script>
</head>
<body ng-app="testApp">
<div ng-controller="MainCtrl">
<form name="frm" class="form-inline" novalidate>
<div class="form-group">
<input type="string" name="cat_name" class="form-control" ng-model="cat_name" placeholder="Enter Category Name" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="text" name="cat_desc" class="form-control" ng-model="cat_desc" placeholder="Enter Your Description" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<br>
<fieldset data-ng-repeat="choice in choices track by $index" ng-form="formChoice">
<br>
<div class="form-group">
<input type="text" ng-model="choice.itemName" class="form-control" name="item_name" placeholder="Category Item Name" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="text" ng-model="choice.itemDesc" class="form-control" name="item_desc" placeholder="Category Description" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="number" ng-model="choice.itemView" class="form-control" name="item_count" ng-pattern="/^[0-9]/" placeholder="Category Item View Count" required>
<p class="help-block" ng-show="formChoice.item_count.$error.pattern">numbers only allowed</p>
<select id="country" ng-model="choice.states" name="state" ng-options="country for (country, states) in countries"></select>
</div>
<div class="form-group">
<option value=''>Choose</option>
City:
<select id="state" ng-disabled="!choice.states" name="city" ng-model="one">
<option value="">Choose</option>
<option ng-repeat="state in choice.states" value="{{state.id}}">{{state.city}}</option>
</select>
</div>
<button ng-click="removeChoice()" class="remove btn btn-danger" ng-disabled="!formChoice.item_name.$dirty||!formChoice.item_desc.$dirty||!formChoice.item_count.$dirty||!formChoice.state.$dirty||!formChoice.city.$dirty||formChoice.item_name.$invalid||formChoice.item_desc.$invalid">close</button>
</fieldset>
<br>
<button class="addfields btn btn-success" ng-click="addNewChoice()" ng-disabled="frm.$invalid">Add fields</button>
<button class="addfields btn btn-success" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.$invalid||frm.item_desc.$invalid ">Save</button>
<span class="help-block" style="color:red" ng-show="frm.cat_desc.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red" ng-show="frm.item_desc.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red" ng-show="frm.cat_name.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red" ng-show="frm.item_name.$error.pattern">ERROR:<BR/>text only allowed</span >
<div id="choicesDisplay">{{ newItemNo }}</div>
</form>
</div>
</body>
</html>
I've created a basic angular form and can't determine why it's not submitting.
http://contact-info.checkoutbiblebowl.com/
The form validation is valid and it still won't submit. I feel like I've overlooked something silly, but have looked at this over the last few days and can't figure out what it is. Any suggestions?
<form method='post' action='' name='form' novalidate ng-controller="myController">
<div class="row form">
<div class="form-inline">
<div class="form-row">
<label class="form-label" style='margin-top: 20px'>Name</label>
<div class="form-item">
<div style="float: left">
First<br/>
<input type="text" ng-model="firstName" name="firstName" class="small" style="width: 200px" maxlength="32" required>
<div ng-cloak ng-show="form.firstName.$error.required" class="required">First name is required</div>
</div>
<div style="float: left; margin-left: 1em">
Last<br/>
<input type="text" ng-model="lastName" name="lastName" class="small" style="width: 200px" maxlength="32" required>
<div ng-cloak ng-show="form.lastName.$error.required" class="required">Last name is required</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="button-row">
<button ng-disabled="!form.$valid" type="submit" class="btn" ng-click="debug()">Submit</button>
</div>
</div>
</div>
</form>
My Controller:
<script type="text/javascript">
angular.module('contact', []).
controller('myController', function ($scope) {
$scope.debug = function () {
console.log($scope.form);
}
});
</script>
I think you just need to specify the action explicitly, not with an empty string otherwise angular will prevent the submission.
http://docs.angularjs.org/api/ng.directive:form
like so:
http://plnkr.co/edit/WtP03BFVyEsnOqf3n8a4?p=preview