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>
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 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
Adding ng-model to a radio button set seems to alter which input gets focused when tabbing. Tested with IE11 (11.842.10586.0), and Angular 1.6.3 (though it occurs in earlier versions of Angular as well).
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<input type="text" ng-model="firstname">
<br/>
<input type="radio" value="1" name="radioExample" checked>
<input type="radio" value="2" name="radioExample">
<input type="radio" value="3" name="radioExample">
<br/>
<input type="text" ng-model="firstname">
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "";
$scope.radioValue = "1";
});
</script>
</body>
</html>
http://plnkr.co/edit/nwo7sljK4NIEr66T6q7w
This shows the normal behavior. If a radio button is selected, tabbing to the radio button group focuses on the selected radio button. If no radio button selected, tabbing forward focuses on the first element, tabbing back focuses on the last one.
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<input type="text" ng-model="firstname">
<br/>
<input type="radio" value="1" ng-model="radioValue" name="radioExample">
<input type="radio" value="2" ng-model="radioValue" name="radioExample">
<input type="radio" value="3" ng-model="radioValue" name="radioExample">
<br/>
<input type="text" ng-model="firstname">
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "";
$scope.radioValue = "1";
});
</script>
</body>
</html>
http://plnkr.co/edit/vMlG7RUg2Kd0sZLmr0lb
This shows the modified behavior when ng-model is added. Regardless of whether a radio button is selected or not, tabbing forward focuses on the first element, tabbing back focuses on the last one. This behavior persists even after a different radio button is selected manually.
I've tried using various combinations of checked/ng-checked, delaying model initialization with $timeout, and using <fieldset>.
What is causing this and more importantly is there a way I can make the second scenario behave like the first one (focusing on the selected radio button when tabbing)?
I forked your "modified behavior" example on plnkr and added the checked attribute to the first radio button. Tabbing then behaves exactly as it does in your "normal behavior" example.
<input type="radio" value="1" ng-model="radioValue" name="radioExample" checked>
<input type="radio" value="2" ng-model="radioValue" name="radioExample">
<input type="radio" value="3" ng-model="radioValue" name="radioExample">
http://plnkr.co/edit/gbZFgKJbJyEBdgB9jXho?p=preview
To reconcile any differences between the model and the 'checked' attribute you could add/remove the attribute when the model value changes.
Try with ng-value. $scope.radioValue = "1"; data type is string change to $scope.radioValue = 1;
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "";
$scope.radioValue = 1;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<input type="text" ng-model="firstname">
<br/>
<input type="radio" data-ng-model="radioValue" data-ng-value="1" name="radioExample">
<input type="radio" data-ng-model="radioValue" data-ng-value="2" name="radioExample">
<input type="radio" data-ng-model="radioValue" data-ng-value="3" name="radioExample">
<br/>
<input type="text" ng-model="firstname">
</form>
</div>
</body>
I have a form in my html page:
<div id=update>
<form class="form-inline" ng-submit="updateCompany(company.companyId,company.companyName,company.newPassword,company.newEmail)" ng-show="updateForm">
<h3>Update Company</h3>
<div class="form-group">
<input type="text"
class="form-control" id="companyId" value={{company.companyId}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyName"
value={{company.companyName}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyPassword"
placeholder="Enter New Password" ng-model="company.newPassword"/>
</div>
<div class="form-group">
<input type="email"
class="form-control" id="companyEmail" placeholder="Enter New Email"
ng-model="company.newEmail" />
<button type="submit" class="btn btn-default">UPDATE</button>
</div>
</form>
</div>
I would like to show the current company values(id,name,password,email),
in the text fields, than give the user option to change the password and the email and send all the parameters when I submit the form.
The problem is when I put the ng-model on the text field, the current value disappears.
I need a fix for that!!!
In the first two fields I see the value now because I don't have the ng-model on them, once I put ng-model it disappear.
In your controller just attach the company data to scope like this:
$scope.company = yourcompanydata
And as for submitting the data, you don't have to list all the parameters in your html. In your html just leave:
ng-submit="updateCompany()"
And in your controller:
$scope.updateCompany = function(){
// your submitting logic here and all the company data will
// be available under $scope.company
// including the new password and email entered by the user
// so your submitting logic could look something like this:
submitCompanyData($scope.company.companyId, $scope.company.newPassword,...)
}
Here is a simple version codepen to get you started, depending what you'd like to do with data afterwords. I can update as needed.
angular
.module('app', [])
.controller('ExampleController', ExampleController);
function ExampleController() {
var vm = this;
vm.company = {};
vm.info = info;
function info(info) {
console.log(info);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='app'>
<div class="container" ng-controller="ExampleController as vm">
<form novalidate>
<input type="text" ng-model="vm.company.name" required/>
<input type="email" ng-model="vm.company.email" required/>
<input type="submit" ng-click="vm.info(vm.company)" value="Submit" />
</form>
{{vm.company| json}}
</div>
</body>
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>