angular if all model values are not null show - javascript

I am trying to show text based on each of the input's in my form having a value entered or a box ticked.
I can't seem to figure out how to get this to work for all the input fields.
Any ideas?
<div class="container" ng-app ng-controller="OrderFormController">
<div class="row form-group">
<div class="well">
<label for="description" class="col-sm-3 control-label">Extinguisher Status</label>
<div ng-if="myForm.inputs != null">show something</div>
<div class="input-group"></div>
</div>
</div>
<form name="myForm">
<div class="row form-group" ng-repeat="input in inputs">
<div class="well">
<label for="description" class="col-sm-3 control-label">{{input.name}}</label>
<div class="input-group">
<input type="text" class="form-control" required placeholder="Enter {{input.name}}" ng-model="entered">
<!-- <span type="button" class="glyphicon glyphicon-ok" ng-if="input.name==' Geo Location:'"></span> -->
<span ng-class="{'input-group-addon danger' : !entered, 'input-group-addon success': entered}" ng-init="isActive = false">
<span ng-class="{'glyphicon glyphicon-remove': !entered, 'glyphicon glyphicon-ok': entered}" ng-init="isActive = false">
</span>
</span>
</div>
</div>
</div>
<div class="row form-group" ng-repeat="check in checks">
<div class="well">
<label for="description" class="col-sm-3 control-label">{{check.name}}</label>
<div class="btn-group" data-toggle="buttons">
<label ng-class="{'btn btn-danger': !isActive, 'btn btn-success': isActive}" ng-init="isActive = false" ng-click="isActive = !isActive">
<input type="checkbox" autocomplete="off" required ng-model="entered"> <span ng-class="{'glyphicon glyphicon-remove': !isActive, 'glyphicon glyphicon-ok': isActive}" ng-init="isActive = false" ng-click="isActive = !isActive">
</span>
</label>
</div>
</div>
</div>
</form>
</div>
Controller:
function OrderFormController($scope) {
$scope.inputs = [{
name: 'Fire Extinguisher Number:',
id: 1,
active: false
}, {
name: 'Extinguisher Location:',
id: 2,
active: false
}, {
name: 'Geo Location:',
id: 3,
active: false
}];
$scope.checks = [{
name: 'Visual Inspection:',
id: 4,
active: false
}, {
name: 'Weight:',
id: 5,
active: false
}, {
name: 'Gague:',
id: 6,
active: false
}, {
name: 'Hose:',
id: 7,
active: false
}, {
name: 'Service Complete:',
id: 8,
active: false
}];
}


The best what you can do, is to bind input fields and checkboxes to properties of the objects $scope.inputs and $scope.checks respectively. Like this:
for inputs:
<div class="row form-group" ng-repeat="input in inputs">
<div class="well">
<label for="description" class="col-sm-3 control-label">{{input.name}}</label>
<div class="input-group">
<input type="text" class="form-control" required="" placeholder="Enter {{input.name}}" ng-model="input.value" />
<span ng-class="{'input-group-addon danger' : !input.value, 'input-group-addon success': input.value}">
<span ng-class="{'glyphicon glyphicon-remove': !input.value, 'glyphicon glyphicon-ok': input.value}"></span>
</span>
</div>
</div>
</div>
and like this for checks:
<div class="row form-group" ng-repeat="check in checks">
<div class="well">
<label for="description" class="col-sm-3 control-label">{{check.name}}</label>
<div class="btn-group" data-toggle="buttons">
<label ng-class="{'btn btn-danger': !check.active, 'btn btn-success': check.active}" ng-click="check.active = !check.active">
<input type="checkbox" autocomplete="off" required="" ng-model="check.active" />
<span ng-class="{'glyphicon glyphicon-remove': !check.active, 'glyphicon glyphicon-ok': check.active}"></span>
</label>
</div>
</div>
</div>
After that it's easy to check that everything is entered and selected:
$scope.isValid = function() {
var inputsFilled = $scope.inputs.every(function(el) {
return el.value;
});
var allChecked = $scope.checks.every(function(el) {
return el.active;
});
return inputsFilled && allChecked;
};
HTML:
<div ng-if="isValid()">show something</div>
Demo: http://plnkr.co/edit/HDYK7cJqN8jkLvQmojB0?p=info

Related

Adding and deleting VueJS form input

i am new to vue js, i have one "iban" entry that I want to do and when "add iban" button is clicked, first entry "delete" range should be added and when I want to delete it starts from above, I think I made a mistake. Thanks already for your help.
<template>
<div class="col-12" v-for="(section, index) in sections">
<div class="mb-1 row">
<div class="col-sm-3">
<label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" id="iban" v-model="section.item">
</div>
</div>
<div class="mb-1 row" v-for="(addition, index) in section.additionals">
<div class="col-sm-3">
<label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Item" v-model="addition.item">
<span class="float-right" style="cursor:pointer" #click="removeItem(index)">X</span>
</div>
</div>
<button class="btn btn-success mt-5 mb-5" #click="addNewItem(index)">New Iban</button>
</div>
</template>
<script>
export default {
data() {
return {
data: {
iban: "",
},
sections: [
{
item: '',
additionals: []
}
]
}
},
methods: {
addNewItem(id) {
this.sections[id].additionals.push({
item: ''
})
},
removeItem(index){
this.sections[index].additionals.splice(index,1)
},
},
}
</script>

Looking at your updated post & images, I think you are looking for the following:
new Vue({
el: "#app",
data() {
return {
data: {
iban: "",
},
sections: [{
ibans: [{item: ""}]
}]
}
},
methods: {
addNewItem(id) {
this.sections[id].ibans.push({item: ''});
},
removeItem(sectionIndex, ibanIndex) {
this.sections[sectionIndex].ibans.splice(ibanIndex, 1);
},
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<div class="col-12 sections" v-for="(section, sectionIndex) in sections">
<div class="mb-1 row" v-for="(iban, ibanIndex) in section.ibans">
<div class="col-sm-3">
<label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Item" v-model="iban.item">
<span v-if="section.ibans.length>1"
class="float-right" style="cursor:pointer" #click="removeItem(sectionIndex, ibanIndex)">X</span>
</div>
</div>
<button class="btn btn-success mt-5 mb-5" #click="addNewItem(sectionIndex)">New Iban</button>
</div>
</template>
</div>

I think this code could help you.
<template>
<div class="col-12">
<div
class="mb-1 row"
v-for="(item, index) in sections.additionals"
:key="index"
>
<div class="col-sm-3">
<label for="iban" class="col-form-label">
<span><i data-feather="file-text"></i></span>IBAN NUMBER
</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" id="iban" v-model="item.item" />
<span
class="float-right"
style="cursor: pointer"
#click="removeItem(index)"
>X</span
>
</div>
<button class="btn btn-success mt-5 mb-5" #click="addNewItem">
New Iban
</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: {
iban: "",
},
sections: { additionals: [{ item: "" }] },
};
},
methods: {
addNewItem() {
this.sections.additionals.push({
item: this.data.iban,
});
},
removeItem(index) {
this.sections.additionals.splice(index, 1);
},
},
};
</script>

How would I be able to multiple select and pass data in the given format in vue js html?

I need to pass the data in the given format.
rules : [{
name:null,
section:null,
data : [{head:null,value:null}]
}],
This is the problem I am facing. Hope somebody could help me sort out a solution. The snippet is given. I need to pass data in the format given above. If another array is needed inside rules[], it is also fine
Is another array needed for head and value inside data[]. This will be also fine, if needed. Hoping for a help. Please help me to have a solution.
Please change the select to read the issues
addForm = new Vue({
el: "#addForm",
data: {
rules: [{
name: null,
section: null,
data: [{
head: null,
value: null
}]
}],
},
methods: {
addNewRules: function() {
this.rules.push({
name: null,
section: null,
data: [{
head: null,
value: null
}]
});
},
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="addForm">
<div class="card-content" v-for="(bok, index) in rules" :key="index">
<p>This is the first part which is fine for me</p>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Act</label>
<select class="form-control" v-model="bok.name">
<option value="Act,1972">Act,1972</option>
<option value="Rule,2012">Rule,2012(CEMR)</option>
<option value="Act,1961">Act,1961</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Section</label>
<input type="text" class="form-control" v-model="bok.section">
</div>
</div>
<div class="row" v-if="bok.name == 'Act,1972'">
<p>When selecting Act,1972 is here rules.data.head. Fine for me</p>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Arms</label>
<input type="text" class="form-control" v-model="bok.data[0].head" required="">
</div>
</div>
</div>
<div class="row" v-if="bok.name == 'Rule,2012'">
<p>When Selecting Rule,2012 HOW TO PASS values rules.data.head in this case . There are two input fields here???</p>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Item</label>
<input type="text" class="form-control" v-model="bok.data[0].head" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Quantity Seized</label>
<input type="text" class="form-control" v-model="bok.data[0].head" required="">
</div>
</div>
</div>
<div class="row" v-if="bok.name == 'Act,1961'">
<p>When selecting Act,1931 Its a select option, I need to select multiple options from here and pass values as rules.data.head. //After I select multiple options I have input fields corresponding to the options. This to be send as rules.data.value.. How
to do this?</p>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Select</label>
<select class=" form-control" v-model="bok.data[0].head" multiple="">
<option value="1">life</option>
<option value="2">Enment</option>
</select>
</div>
</div>
</div>
<div class="row" v-if="bok.data[0].head == 1">
<p>If option is 1, i should display this and pass value as rules.data.value . HERE THERE ARE TWO INPUT FIELDS How to pass the values</p>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Area1</label>
<input type="text" class="form-control" required="" v-model="bok.data[0].value">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Area2</label>
<input type="text" class="form-control" required="" v-model="bok.data[0].value">
</div>
</div>
</div>
<div class="row" v-if="bok.data[0].head == 2">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">No.</label>
<input type="text" class="form-control" required="" v-model="bok.data[0].value">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Model</label>
<input type="text" class="form-control" required="">
</div>
</div>
</div>
</div>
<a #click="addNewRules">Add Another Rule</a>
</div>

My approach is basically change the type of the data[0].head and data[0].value depending on the options you selected.
So for example, if you select Rule,2012, then data[0].head would be an object with item and qty as its items. And if you select Act,1961, data[0].head would be an array of numbers (e.g. ['1', '2']) and data[0].value would be an object with area_1 and area_2 or number and model or all the four items.
See and try the code snippet to see the code I added/changed.
(Or compare your code with mine and you'd see the changes.)
addForm = new Vue({
el: "#addForm",
data: {
rules: [{
name: null,
section: null,
data: [{
head: null,
value: null
}]
}],
},
methods: {
addNewRules: function() {
this.rules.push({
name: null,
section: null,
data: [{
head: null,
value: null
}]
});
},
removeRuleDataValueProps: function(i) {
var d = this.rules[i].data[0];
if (jQuery.inArray('1', d.head) < 0) {
Vue.delete(d.value, 'area_1');
Vue.delete(d.value, 'area_2');
}
if (jQuery.inArray('2', d.head) < 0) {
Vue.delete(d.value, 'number');
Vue.delete(d.value, 'model');
}
},
_setRuleDataHeadDataType: function(i) {
var d = this.rules[i].data[0],
h = d.head,
_h = d._head,
_restore = true;
if (undefined === _h) {
d._head = h;
_restore = false;
}
switch (this.rules[i].name) {
case 'Rule,2012':
var a = Array.isArray(h);
if (a || null === h || 'object' !== typeof h) {
Vue.set(d, 'head', {});
}
break;
case 'Act,1961':
if (!Array.isArray(h)) {
Vue.set(d, 'head', []);
}
break;
default:
if (_restore && undefined !== _h) {
d.head = _h;
}
break;
}
},
_setRuleDataValueDataType: function(i) {
var d = this.rules[i].data[0],
v = d.value,
_v = d._value,
_restore = true;
if (undefined === _v) {
d._value = v;
_restore = false;
}
switch (this.rules[i].name) {
case 'Act,1972':
case 'Act,1961':
var a = Array.isArray(v);
if (a || null === v || 'object' !== typeof v) {
Vue.set(d, 'value', {});
}
if (_restore) {
this.removeRuleDataValueProps(i);
}
break;
default:
if (_restore && undefined !== _v) {
d.value = _v;
}
break;
}
},
setRuleDataType: function(i, k) {
if (this.rules[i] && this.rules[i].data[0]) {
if (!k || 'head' === k) {
this._setRuleDataHeadDataType(i);
}
if (!k || 'value' === k) {
this._setRuleDataValueDataType(i);
}
}
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="addForm">
<h3>Try the different options and see the JSON output changes.</h3>
<div class="card-content" v-for="(bok, index) in rules" :key="index">
<p>This is the first part which is fine for me</p>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Act</label>
<!-- Here we change the type of `bok.data[0].head` depending on the selected option. -->
<select class="form-control" v-model="bok.name" #change="setRuleDataType(index)">
<option value="Act,1972">Act,1972</option>
<option value="Rule,2012">Rule,2012(CEMR)</option>
<option value="Act,1961">Act,1961</option>
</select>
</div>
</div>
<!--</div>-->
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Section</label>
<input type="text" class="form-control" v-model="bok.section">
</div>
</div>
<!-- Here, `bok.data[0].head` is expected to be a `string`. -->
<div class="row" v-if="bok.name == 'Act,1972'">
<p>When selecting Act,1972 is here rules.data.head. Fine for me</p>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Arms</label>
<input type="text" class="form-control" v-model="bok.data[0].head" #change="setRuleDataType(index, 'value')" required="">
</div>
</div>
</div>
<!-- Here, `bok.data[0].head` is an `object` with 'item' and 'qty'. -->
<div class="row" v-if="bok.name == 'Rule,2012'">
<p>When Selecting Rule,2012 HOW TO PASS values rules.data.head in this case . There are two input fields here???</p>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Item</label>
<input type="text" class="form-control" v-model="bok.data[0].head.item" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Quantity Seized</label>
<input type="text" class="form-control" v-model="bok.data[0].head.qty" required="">
</div>
</div>
</div>
<!-- Here, `bok.data[0].head` would be an array of numbers. -->
<div class="row" v-if="bok.name == 'Act,1961'">
<p>When selecting Act,1931 Its a select option, I need to select multiple options from here and pass values as rules.data.head. //After I select multiple options I have input fields corresponding to the options. This to be send as rules.data.value.. How
to do this?</p>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Select</label>
<select class=" form-control" v-model="bok.data[0].head" #change="removeRuleDataValueProps(index)" multiple="">
<option value="1">life</option>
<option value="2">Enment</option>
</select>
</div>
</div>
</div>
<div class="row" v-if="jQuery.inArray('1', bok.data[0].head) > -1">
<p>If option is 1, i should display this and pass value as rules.data.value . HERE THERE ARE TWO INPUT FIELDS How to pass the values</p>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Area1</label>
<input type="text" class="form-control" required="" v-model="bok.data[0].value.area_1">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Area2</label>
<input type="text" class="form-control" required="" v-model="bok.data[0].value.area_2">
</div>
</div>
</div>
<div class="row" v-if="jQuery.inArray('2', bok.data[0].head) > -1">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">No.</label>
<input type="text" class="form-control" required="" v-model="bok.data[0].value.number">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Model</label>
<input type="text" class="form-control" required="" v-model="bok.data[0].value.model">
</div>
</div>
</div>
<h3>The JSON value of <code>bok</code></h3>
<textarea rows="3" cols="75%" readonly>{{ JSON.stringify(bok) }}</textarea>
</div>
<a #click="addNewRules">Add Another Rule</a>
</div>

My opinion,
Based on the HTML you provied, create one data property=ruleTemplate (it makes sure v-model with related form controls).
When add new rules, push one clone of the template to the rules
When you need the data, just convert the rules to the specific format like
this.getFormattedRules in below demo.
Below is the demo:
addForm = new Vue({
el: "#addForm",
data: {
ruleTemplates: {
name: '',
section: '',
subMenu: {
'Act,1972': '',
'Rule,2012': {'item': '','qty': ''},
'Act,1961': {'head':[], options:{'option1':'', 'option2':''}}
}
},
rules: [{
name: '',
section: '',
subMenu: {
'Act,1972': '',
'Rule,2012': {'item': '','qty': ''},
'Act,1961': {'head':[], options:{'option1':'', 'option2':''}}
}
}
],
},
computed: {
formatedJson: function () {
let handler1972 = function (data) {
return [{'head': 'Arms', 'value': data}]
}
let handler2012 = function (data) {
return [{'head': 'item', 'value': data.item},{'head': 'qty', 'value': data.qty}]
}
let handler1961 = function (data) {
return [{'head': 'option1', 'value': data.options.option1},{'head': 'option1', 'value': data.options.option2}]
}
let handlers = {'Act,1972': handler1972, 'Rule,2012': handler2012, 'Act,1961': handler1961
}
return this.rules.map((rule) => {
let formatedRule = new Object()
// convert the rule to the specific format
formatedRule.name = rule.name
formatedRule.section = rule.section
handler = handlers[rule.name]
formatedRule.data = handler ? handler(rule.subMenu[rule.name]) : []
return formatedRule
})
}
},
methods: {
addNewRules: function() {
this.rules.push(Object.assign({},this.ruleTemplates))
}
}
})
.show-format {
position:absolute;
top:2px;
right -4px;
background-color:gray
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="addForm">
<div class="show-format">Format: {{formatedJson}}</div>
<div class="card-content" v-for="(bok, index) in rules" :key="index">
<p>This is the first part which is fine for me</p>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Act</label>
<select class="form-control" v-model="bok.name">
<option value="Act,1972">Act,1972</option>
<option value="Rule,2012">Rule,2012(CEMR)</option>
<option value="Act,1961">Act,1961</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Section</label>
<input type="text" class="form-control" v-model="bok.section">
</div>
</div>
<div class="row" v-if="bok.name == 'Act,1972'">
<p>When selecting Act,1972 is here rules.data.head. Fine for me</p>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Arms</label>
<input type="text" class="form-control" v-model="bok.subMenu['Act,1972']" required="">
</div>
</div>
</div>
<div class="row" v-if="bok.name == 'Rule,2012'">
<p>When Selecting Rule,2012 HOW TO PASS values rules.data.head in this case . There are two input fields here???</p>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Item</label>
<input type="text" class="form-control" v-model="bok.subMenu['Rule,2012']['item']" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Quantity Seized</label>
<input type="text" class="form-control" v-model="bok.subMenu['Rule,2012']['qty']" required="">
</div>
</div>
</div>
<div class="row" v-if="bok.name == 'Act,1961'">
<p>When selecting Act,1931 Its a select option, I need to select multiple options from here and pass values as rules.data.head. //After I select multiple options I have input fields corresponding to the options. This to be send as rules.data.value.. How
to do this?</p>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Select</label>
<select class=" form-control" v-model="bok.subMenu['Act,1961'].head" >
<option value="1">life</option>
<option value="2">Enment</option>
</select>
</div>
</div>
</div>
<div class="row" v-if="bok.subMenu['Act,1961'].head == 1">
<p>If option is 1, i should display this and pass value as rules.data.value . HERE THERE ARE TWO INPUT FIELDS How to pass the values</p>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Area1</label>
<input type="text" class="form-control" required="" v-model="bok.subMenu['Act,1961'].options.option1">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Area2</label>
<input type="text" class="form-control" required="" v-model="bok.subMenu['Act,1961'].options.option2">
</div>
</div>
</div>
<div class="row" v-if="bok.subMenu['Act,1961'].head == 2">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">No.</label>
<input type="text" class="form-control" required="" v-model="bok.subMenu['Act,1961'].options.option1">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Model</label>
<input type="text" class="form-control" required="" v-model="bok.subMenu['Act,1961'].options.option2">
</div>
</div>
</div>
</div>
<a #click="addNewRules" style="background-color:green">Add Another Rule</a>
</div>

hey why don't you go with multi-select checkbox drop-down and apply v-model on checkbox. ?
Link: How to use Checkbox inside Select Option

How to set radio button checked initially in AngularJs?

I have created two tabs where the tabs gets navigated by checking radio buttons. One of the two tabs will be active initially but I need to have the corresponding radio button too checked initially.
<div ng-app="myApp">
<div class="account-tab-selector" id="tabs" ng-controller="TabsCtrl">
<ul>
<li class="col-sm-6 text-center" ng-repeat="tab in tabs">
<label for="{{tab.url}}">
<input ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)" type="radio" name="radio" id="{{tab.url}}" ng-model="choice.isSelected" value="true">{{tab.title}}</label>
</li>
</ul>
<div class="clearfix"></div>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<script type="text/ng-template" id="one.tpl.html">
<div class="customer-reg-form" id="new_customer_form">
<div class="sign-up-fb">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>
Sign Up With Facebook</a>
</div>
<div class="reg-form">
<div class="or-separator"><span>OR</span></div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="fname">First Name<span>*</span></label>
<div class="input-group">
<input name="firstname" id="fname">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="lname">Last Name<span>*</span></label>
<div class="input-group">
<input name="lastname" id="lname">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="mnumber">Mobile Number<span>*</span></label>
<div class="input-group">
<input name="mobile-number" id="mnumber">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="dlocation">Default Location<span>*</span></label>
<div class="input-group">
<select name="default-location" class="dropstyle">
<option></option>
<option>Kansas</option>
</select>
</div>
</div>
<div class="col-sm-12 form-group">
<label for="email">Email Address<span>*</span></label>
<div class="input-group">
<input name="email" id="email">
</div>
</div>
<div class="col-sm-12 form-group">
<label for="password">Password<span>*</span></label>
<div class="input-group">
<input name="password" id="password">
</div>
</div>
</div>
<div class="agreement">By clicking "Register" below, you are agreeing to our Terms of Service agreement.</div>
</div>
</div>
</script>
<script type="text/ng-template" id="two.tpl.html">
<div class="customer-reg-form" id="existing_customer_form">
<div class="sign-up-fb">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>
Login With Facebook</a>
</div>
<div class="reg-form">
<div class="or-separator"><span>OR</span></div>
<div class="row">
<div class="col-sm-12">
<label for="mnumber">Email Address<span>*</span></label>
<input id="mnumber">
</div>
<div class="col-sm-12">
<label for="mnumber">Password<span>*</span></label>
<input id="mnumber">
</div>
</div>
<div class="forgot-pwd">Forgot Password?</div>
</div>
</div>
</script>
</div>
var app = angular.module("myApp", []);
app.controller('TabsCtrl', ['$scope', function($scope) {
$scope.tabs = [{
title: 'I am a new customer',
url: 'one.tpl.html',
isSelected: true
}, {
title: 'I have an account',
url: 'two.tpl.html'
}];
$scope.currentTab = 'one.tpl.html';
$scope.onClickTab = function(tab) {
$scope.currentTab = tab.url;
};
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
};
}]);
Jsfiddle here

You have bound your radio button with $scope.choice.isSelected, you can set the value for this in controller or in ng-init it self.
Can you please add below two lines in your controller?
$scope.choice={};
$scope.choice.isSelected = "true";
Or in much better way, you can modify your tag like:
<li class="col-sm-6 text-center" ng-repeat="tab in tabs">
<label for="{{tab.url}}">
<input ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)" type="radio" name="radio" id="{{tab.url}}" ng-model="tab.isRadioChecked" value="true">{{tab.title}}</label>
</li>
And in your controller.
$scope.tabs = [{
title: 'I am a new customer',
url: 'one.tpl.html',
isSelected: true,
isRadioChecked: "true"
}, {
title: 'I have an account',
url: 'two.tpl.html'
}];

You can do this simply by setting the checked attribute for the input. For example:
<input type="radio" checked> This is a radio button

Form Validation with ngClass and AngularJS not working

I am new to angular and am trying (and failing) to get the ngClass to work with some validation on a basic contact form.
I want to highlight the inputs when they are in the success/error by highlighting with bootstrap 'has-error' and 'glyphicon-remove' classes if there are any issues with the data.
my form is as follows;
<form class="row instant-quote-form" ng-controller="formCtrl" ng-cloak>
<div class="col-md-12">
<h2>Quick Form</h2>
<div class="form-group has-feedback">
<div class="input-group col-md-12">
<label for="titleSelect" class="input-group-addon">Title :</label>
<select name="titleSelect" id="titleSelect" class="form-control"
ng-model="form.titleResult" required>
<option value="">Select Title...</option>
<option ng-repeat="option in titles" value="{{option.name}}">{{option.name}}</option>
</select>
</div>
<div class="input-group col-md-12" ng-class="{ 'has-error': form.name.$invalid, 'text-success' : form.name.$valid}">
<label for="nameInput" class="input-group-addon">Name :</label>
<input type="text" class="form-control" id="nameInput" placeholder="Full Name..." ng-model="form.name" required>
<span ng-class="{ 'glyphicon-remove' : form.name.$invalid, 'glyphicon-ok' : form.name.$valid }" class="glyphicon form-control-feedback"></span>
</div>
<div class="input-group col-md-12">
<label for="postcodeInput" class="input-group-addon">Postcode :</label>
<input type="text" class="form-control" id="postcodeInput" placeholder="Postcode..." ng-model="form.postcode" required>
<span class="glyphicon form-control-feedback"></span>
</div>
<div class="input-group col-md-12">
<label for="emailInput" class="input-group-addon">Email :</label>
<input type="email" class="form-control" id="emailInput" placeholder="Email Address..." ng-model="form.email" required>
<span class="glyphicon form-control-feedback"></span>
</div>
<div class="input-group col-md-12">
<label for="telephoneInput" class="input-group-addon">Telephone :</label>
<input type="text" class="form-control" id="telephoneInput" placeholder="Telephone Number..." ng-model="form.telephone" required>
<span class="glyphicon form-control-feedback"></span>
</div>
<div class="input-group col-md-12">
<label for="timeSelect" class="input-group-addon">To to Call :</label>
<select name="timeSelect" id="timeSelect" class="form-control"
ng-model="form.timeResult" required>
<option value="">Select Time...</option>
<option ng-repeat="option in times" value="{{option.name}}">{{option.name}}</option>
</select>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary btn-block" ng-click="submit(form)">Request Callback!</button>
</div>
</div>
</div>
</form>
my controller is as follows;
'use strict';
app.controller('formCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.titles =
[
{ id: '1', name: 'Mr.' },
{ id: '2', name: 'Mrs.' },
{ id: '3', name: 'Master.' },
{ id: '4', name: 'Miss.' },
{ id: '5', name: 'Sir.' },
{ id: '6', name: 'Dr.' },
{ id: '7', name: 'Other.' }
];
$scope.times =
[
{ id: '1', name: 'Morning.' },
{ id: '2', name: 'Afternoon.' }
];
$scope.submit = function (form) {
console.log(form);
};
}]);
However, the ngclass directive is not being applied? also it seems that the submit is being called even when the form is invalid? do I need to validate the form fromthe controller as well?

Add a name attribute and value to your form tag & input...
<form name="form" class="row instant-quote-form" ng-controller="formCtrl" ng-cloak>
&
<input name="name" type="text" class="form-control" id="nameInput" placeholder="Full Name..." ng-model="name" required>
because when you refer to form.name in 'has-error': form.name.$invalid it works based off of the name of the form and the name of the input box
Note there is a conflict using form.name as your ng-model based upon your controller you will want ng-model="name"
Here is a working plnkr

How to add email validation in bootstrap?

I am using bootstrap in my web page and trying to make a form on that page.
I've used the standard classes of bootstrap for making the form. I've already used the validation to check the emptiness of the form. I just want to add the email and phone number validation further in my code.
The code for the form and the and the already declared validation script is given below:
<script type="text/javascript">
function validateText(id) {
if ($("#" + id).val() == null || $("#" + id).val() == "") {
var div = $("#" + id).closest("div");
div.removeClass("has-success");
$("#glypcn" + id).remove();
div.addClass("has-error has-feedback");
div.append('<span id="glypcn' + id
+ '" class="glyphicon glyphicon-remove form-control-feedback"></span>');
return false;
} else {
var div = $("#" + id).closest("div");
div.removeClass("has-error");
$("#glypcn" + id).remove();
div.addClass("has-success has-feedback");
div.append('<span id="glypcn' + id
+ '" class="glyphicon glyphicon-ok form-control-feedback"></span>');
return true;
}
}
$(document).ready(function() {
$("#contactButton").click(function() {
if (!validateText("contactName")) {
return false;
}
if (!validateText("contactEmail")) {
return false;
}
if (!validateText("contactMobile")) {
return false;
}
if (!validateText("contactAddress1")) {
return false;
}
if (!validateText("contactCity")) {
return false;
}
$("form#contactForm").submit();
}
);
});
<form class="form-horizontal" id="contactForm">
<div class="form-group">
<label for="contactName" class="col-sm-2 control-label">Name<sup>*</sup></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contactName">
</div>
</div>
<div class="form-group">
<label for="contactEmail" class="col-sm-2 control-label">Email<sup>*</sup></label>
<div class="col-sm-10">
<input type="email" class="form-control" id="contactEmail">
</div>
</div>
<div class="form-group">
<label for="contactMobile" class="col-sm-2 control-label">Mobile
Number<sup>*</sup>
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contactMobile">
</div>
</div>
<div class="form-group">
<label for="contactAddress1" class="col-sm-2 control-label">Address1<sup>*</sup></label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" id="contactAddress1"></textarea>
</div>
</div>
<div class="form-group">
<label for="contactAddress2" class="col-sm-2 control-label">Address2</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" id="contactAddress2"></textarea>
</div>
</div>
<div class="form-group">
<label for="contactCity" class="col-sm-2 control-label">City<sup>*</sup></label>
<div class="col-sm-10">
<select class="form-control" id="contactCity">
<option>KURUKSHETRA</option>
<option>PEHOWA</option>
<option>KARNAL</option>
</select>
</div>
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
<p>
<span id="helpBlock" class="help-block"><sup>*</sup> marked fields
are compulsory!</span>
</p>
</div>
<div class="checkbox">
<label> <input type="checkbox"> I agree to the <a href="#">Terms of
Service</a>
</label>
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
<center>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block"
id="contactButton">
Submit <span class="glyphicon glyphicon-arrow-right"> </span>
</button>
</p>
</center>
</div>
</form>

You should use a regex like mentioned in the comment.
The regex is also mentioned here.
var email_regex = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
Here is a working example.

you have to require additional plugin for this.
Try this:
<form id="emailForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="email" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#emailForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
}
});
});
</script>

Categories