I have a case where I use a form with AngularJS. I have radio buttons and the last option is always text input. All of them are connected with the same model so what ever user chooses with radio buttons or type in text input is saved in model.
The problem is with text input. When a user clicks the radio button, its value is shown on the last text input line. How do I stop that and still keep it connected to the same ng-model?
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="sikhizm" ng-model="$ctrl.diversityTest.religion">Sikhizm
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="catholic" ng-model="$ctrl.diversityTest.religion">Catholic
</label>
...
<div class="mtl-20">
Please write in: <input class="input-material" type="text" name="religion" ng-model="$ctrl.diversityTest.religion" >
</div>
You can try a different approach like this:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.$ctrl = {};
$scope.$ctrl.diversityTest = {};
});
<!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">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="sikhizm" ng-model="$ctrl.diversityTest.religion">Sikhizm
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="catholic" ng-model="$ctrl.diversityTest.religion">Catholic
</label>
...
<div class="mtl-20">
Please write in: <input ng-keyup="$ctrl.diversityTest.religion = $ctrl.diversityTest.temp" class="input-material" type="text" name="religion" ng-model="$ctrl.diversityTest.temp" >
</div>
<br>
This is religion model value : {{$ctrl.diversityTest.religion}}
</div>
How about this for a solution? Basically, have the radio buttons. Create an 'Other' with a text box, and only allow it to be selected if you enter a value for other. The text model is different, but when it's filled, will allow you to select 'Other' which will take on the value of what is in the textbox, and pass it to the model you care about.
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="{{ textValue }}"
ng-disabled="!textValue && !(textValue.length > 5)"
ng-model="diversityTest.religion">
Other
<input class="input-material" type="text" name="religion" ng-model="textValue">
</label>
http://plnkr.co/edit/f9lzNLhZuy0c7BI2kE2A?p=preview
Related
I have created one form with six fields out of which five are mandatory.There is one submit button. If user hasn't entered any input in the textbox and clicks on submit button, all the required textbox should highlight with red border. How to implement it? :-
<div ng-app="myApp" ng-controller="formCtrl">
<form name="demoForm">
<label>First Name :</label>
<input type="text" ng-model="firstName" required/><br><br>
<label>Last Name :</label>
<input type="text" ng-model="lastName"/><br><br>
<label>Email :</label>
<input type="email" ng-model="emailDet" required/><br><br>
<label>Contact No :</label>
<input type="text" ng-model="contactNo" required/><br><br>
<label>Current Location :</label>
<input type="text" ng-model="currLoc" required/><br><br>
<label>Preferred Location :</label>
<input type="text" ng-model="preLoc" required/><br><br>
<button type="button" ng-click="onSubmit()">Submit</button>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.onSubmit = function() {
}
});
</script>
This is quite easy. Define new css rule like here and all should be fine
.ng-invalid.ng-submitted input {
border: 1px solid red;
}
Under the hood, angular assign lots of classes to your form and input.
.ng-invalid
signals that something is wrong on the form
.ng-submitted
signals that form was submitted.
And so on. Check documentation and you will find a lot of new findings.
I have form with radial buttons but the last one is a combination of radial button and text input. I want to somehow connect the two inputs. User should not be able to input the text before clicking the radial button next to it. Also when user starts to write text I wanna stop the radial button checked indication from disappearing. If user clicks some other radial button the text field should empty itself.
<label class="form-check-label">
<input type="radio" name="religion" value="noSay" ng-model="$ctrl.diversityTest.religion">Prefer not to say
</label>
<label class="form-check-label">
<input type="radio" name="religion" value="{{$ctrl.diversityTest.religion}}"> Any other religion or beliefe:
<div>
Please write in: <input ng-keyup="$ctrl.diversityTest.religion = $ctrl.diversityTest.temp" class="input-material" type="text" name="religion" ng-model="$ctrl.diversityTest.temp">
</div>
</label>
You can try like this:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.$ctrl = {};
$scope.$ctrl.diversityTest = {};
});
<!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">
<label class="form-check-label">
<input type="radio" ng-click="$ctrl.diversityTest.temp='';$ctrl.diversityTest.otherReligionRadio='';" name="religion" value="noSay" ng-model="$ctrl.diversityTest.religion">Prefer not to say
</label>
<label class="form-check-label">
<input type="radio" name="religion" value="Other_religion" ng-model="$ctrl.diversityTest.otherReligionRadio" > Any other religion or beliefe:
<div>
Please write in: <input class="input-material" type="text" ng-disabled="!($ctrl.diversityTest.otherReligionRadio)" ng-keyup="$ctrl.diversityTest.religion = $ctrl.diversityTest.temp" name="religion" ng-model="$ctrl.diversityTest.temp">
</div>
</label>
<br> Religion : {{$ctrl.diversityTest.religion}}
</div>
I am editing User Form. I send the data from controller to the edit view using $scope object for editing form. The data is look like this:
$scope.changeUser = [
{
id: 1,
username: 'Ramesh',
password: 'Ramesh1#23',
role: 'admin',
active: 'no'
}
];
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser.active" value="yes"/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changerUser.active" value="no"/>
No
</label>
</div>
</div>
</div>
When edit form get {{changeUser.action}} than, I have to checked the radio button accordingly. As like when action=='no' the radio button with name no should be automatically checked as we did using checked value=no in the html. I have to write the ng-if conditions seeing the action value.
You are missing the index of changeUser array in your ng-model.
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser[0].active" value="yes" />
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser[0].active" value="no" />
No
</label>
</div>
</div>
</div>
See the Plnkr
I have two different div which containing check box
first div
<div>
<input type="checkbox" ng-true-value="1" ng-model="req_doc"> one
<input type="checkbox" ng-true-value="2" ng-model="req_doc"> two
<input type="checkbox" ng-true-value="3" ng-model="req_doc"> three
</div>
second div
<div>
<input type="checkbox" ng-true-value="1" ng-model="pen_doc"> one
<input type="checkbox" ng-true-value="2" ng-model="pen_doc"> two
<input type="checkbox" ng-true-value="3" ng-model="pen_doc"> three
</div>
I want when i click on first div's check box if it selected in second div's check box then automatically unchecked it from second div's check box.
try by giving the same Name or ID to all the checkboxes examples:
<div>
<input type="chckbox" ng-true-value="1" ng-model="pen_doc" name="chk1"> one
<input type="chckbox" ng-true-value="2" ng-model="pen_doc" name="chk1"> two
</div>
so that you can select one checkbox at a time.
<input type="checkbox"> should be used alone, bound to its specific model variable. If you want multiple "checkboxes" indicating the set of non-overlapping values of a single variable, use <input type="radio">:
<input type="radio" ng-model="pen_doc" value="1">
<input type="radio" ng-model="pen_doc" value="2">
<input type="radio" ng-model="pen_doc" value="3">
As far as your original question goes, you could just do something like this in your controller:
$scope.$watch('req_doc', function (value) {
if ($scope.pen_doc == value) { // change to `===` if your values are correctly typed
$scope.pen_doc = 0;
}
});
are looking this type
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-checkbox-input-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-app="checkboxExample">
<script>
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.value1 = true;
$scope.value2 = 'YES'
}
]);
</script>
<form name="myForm" ng-controller="ExampleController">
<div>
<input type="checkbox" ng-true-value="1" ng-model="req_doc">one
<input type="checkbox" ng-true-value="2" ng-model="req_doc">two
<input type="checkbox" ng-true-value="3" ng-model="req_doc">three
</div>
<div>
<input type="checkbox" ng-true-value="1" ng-checked="!req_doc">one
<input type="checkbox" ng-true-value="2" ng-checked="!req_doc">two
<input type="checkbox" ng-true-value="3" ng-checked="!req_doc">three
</div>
</form>
</body>
</html>
I need to make a system to change the total price by number of tickets selected. I created some radio buttons to choose the number of ticket. The ploblem is that the default value is unset and the result is null on loading.
<input type="radio" ng-model="people" value="1" checked="checked"><label>1</label>
<input type="radio" ng-model="people" value="2"><label>2</label>
<input type="radio" ng-model="people" value="3"><label>3</label>
<ul>
<li>{{10*people}}€</li>
<li>{{8*people}}€</li>
<li>{{30*people}}€</li>
</ul>
Please see my jsfiddle.
Set a default value for people with ngInit
<div ng-app>
<div ng-init="people=1" />
<input type="radio" ng-model="people" value="1"><label>1</label>
<input type="radio" ng-model="people" value="2"><label>2</label>
<input type="radio" ng-model="people" value="3"><label>3</label>
<ul>
<li>{{10*people}}€</li>
<li>{{8*people}}€</li>
<li>{{30*people}}€</li>
</ul>
</div>
Demo: Fiddle
<div ng-app="" ng-controller="myCntrl">
<input type="radio" ng-model="people" value="1"/><label>1</label>
<input type="radio" ng-model="people" value="2"/><label>2</label>
<input type="radio" ng-model="people" value="3"/><label>3</label>
</div>
<script>
function myCntrl($scope){
$scope.people=1;
}
</script>
why not just ng-checked="true"
In Angular 2 this is how we can set the default value for radio button:
HTML:
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gender"
[(ngModel)]="gender" id="optionsRadios1" value="male">
Male
</label>
In the Component Class set the value of 'gender' variable equal to the value of
radio button:
gender = 'male';
<input type="radio" name="gender" value="male"<%=rs.getString(6).equals("male") ? "checked='checked'": "" %>: "checked='checked'" %> >Male
<%=rs.getString(6).equals("male") ? "checked='checked'": "" %>