Hi guys i just want to ask how to solve this issue.
i have a radio button
<div class="col-sm-2">
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="radioOpt" ng-model="modalData.mine" ng-value="true" ng-change="eval()">mine</label>
</div>
</div>
/* my input fields that is set to disabled *
<div class="col-sm-2" style="padding:0;margin:0;">
<div class="form-group">
<input ng-disabled="disabled " class="form-control" type="text" ng-model="modalData.input">
</div>
</div>
controller :
$scope.eval= function() {
if($scope.modalData.mine) {
$scope.disabled = false;
} else {
$scope.disabled = true;
}
}
heres the codepen guys : http://codepen.io/pango143/pen/YNNJwK
the scenario is i have a disabled input which only be enabled when the mine radio btn is selected. i dont have problem with that, But the problem is when i click another radio btn the input is not returning to disabled state which means the radio button is not sending false value in the binding.
Related
I need to add a button to my Form in which if I click that button it should show me a text area and a Submit button so after typing any text I will click the submit button it should print the checkbox in my form using AngularJS.
Same as in the above pic. I am new to typescript so help me to fix this
Use the ngClick directive:
<button ng-click="yourFunction()">OK</button>
https://docs.angularjs.org/api/ngTouch/directive/ngClick
Also, please read the documentation or a tutorial/example before you ask such a basic question...
<div data-ng-controller="homeController">
<div class="col-lg-1">
<span class="glyphicon glyphicon-plus-sign" style="cursor:hand" aria-hidden="true" title="Add More" ng-click="onEnable()"></span>
</div>
<div class="col-lg-5">
<input type="text" ng-if="isEnableTextBox" ng-model="model.label" name="dynamic" class="form-control">
</div>
<div class="col-lg-5">
<button type="button" class="btn btn-primary" ng-disabled="!model.label" ng-click="onAddCheckBox()">Submit</button>
</div>
<div class="col-lg-12">
<div class="checkbox col-lg-12" ng-repeat="checkBox in checkBoxes track by $index">
<input type="checkbox" name="name_{{$index}}" id="name_{{$index}}" ng-model="checkBox.selectedCheckBox" class="filled-in square chk-col-pink ng-pristine ng-untouched ng-valid ng-empty" checked="checked" aria-invalid="false">
<label for="checkBox.label">{{checkBox.label}}</label>
</div>
</div>
</div>
function init() {
$scope.isEnableTextBox = false;
$scope.checkBoxes = [];
$scope.model = {};
}
$scope.onEnable = function onEnable() {
$scope.isEnableTextBox = true; // Enable text box on Click Plus Icon
};
$scope.onAddCheckBox = function onAddCheckBox() { // On submit button click push the given name into array and empty the text box. Please refer the attached image.
var _checkBoxModel = angular.copy($scope.model.label);
$scope.model.label = "";
$scope.checkBoxes.push({'label': _checkBoxModel, 'selectedCheckBox': true});
};
init();
Sample Image
I have a Angularjs form with a list with names.
When I click on a name the form will change with here profile.
When I change one input and don't save it and I click on a other profile every thing change except the one input that has changed.
<form class="form-horizontal bordered-row" >
<div class="form-group">
<label class="col-sm-4 control-label">Naam</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="" value="{{gegevens.naam | capitalize}}">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Categorie</label>
<div class="col-sm-6">
<select class="form-control">
<option ng-repeat="x in producten_categorie" value="{{x.value}}" ng-selected="gegevens.categorie == x.value">{{x.name}}</option>
</select>
</div>
</div>
<div class="form-group pad25L">
<button class="btn btn-info" ng-click="productAlgemeen_update(gegevens.naam);">Save</button>
</div>
</form>
And the change scope:
$scope.productGegevens = function(product){
$http.post("php/producten-locatie.php", {'id':product.id}).then(function(response){
$scope.producten_locatie = response.data.records[0];
$scope.gegevens = {
id:product.id,
naam:product.naam,
categorie:product.categorie,
straatnaam:$scope.producten_locatie.straatnaam,
huisnummer:$scope.producten_locatie.huisnummer,
postcode:$scope.producten_locatie.postcode,
stadsnaam:$scope.producten_locatie.stadsnaam
};
});
}
Please note that input data needs to bind with ng-model whereas you are entering your input with value tag. it means the value is rendered in html not in model, so when you click on other profile UI can not detect the change. Please use ng-model for input value not value tag of input box.
I am using AngularJS step wizard and inside the form for the first step I need validation errors to appear when the use tries to hit submit. Right now I have the following:
<span class="error" ng-show="user.validate.step1.firstname.$invalid">Required Field</span>
But the error shows when I first goto the step and when I start typing in the field it goes away, I would like this to appear when the user tries to hit submit, not when they first goto the step. I already have this to indicate a required field
<span class="error">*</span>
Here is the full code:
<form name="user.validate.step1" novalidate>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="firstname" class="col-md-4 form-label">First Name:</label>
<div class="col-md-8">
<div class="input-group">
<input class="form-control" type="text" name="firstname" ng-model="user.firstname" value="{{user.firstname}}" ng-blur="blur1=true" required />
<span class="error" ng-show="user.validate.step1.firstname.$invalid">*</span>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
keep in mind I have more than one input in this form.
Add the validation in the button using ng-click="validateInputs()" and create a var invalidEntry and a function validateInputs() to check if the input is valid or not. Something like this:
var inputs = [inputModel1,inputModel2,inputModel3];
function validateInputs(){
invalidEntry = false;
for(e in inputs){
if(CheckInvalid(inputs[e])){
invalidEntry = true;
return;
}
}
}
function CheckValid(string){
if(string == "" || string === null || string === undefined){
return true;
} else {
return false;
}
}
The submit button:
<button ng-click="validateInputs()">Submit</button>
And the span:
<span class="error" ng-show="invalidEntry">Required Field</span>
And the inputs should look like this:
<input type="text" ng-model="inputModel1"></input>
<input type="text" ng-model="inputModel2"></input>
<input type="text" ng-model="inputModel3"></input>
You should change ngShow in following way
ng-show="user.validate.step1.firstname.$invalid && !user.validate.step1.firstname.$pristine"
Check this article block AngularJS Form Validation: Only Showing Errors After Submitting the Form
I have the following code, which shows the a.btn anchor if both inputs have values and inputURL is a valid URL. Works fine but I want to hide the button again on click, how do I do this, do I reset the form or actually hide the button on click?
<form name="myForm" class="row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input name="inputName" type="text" id="urlName" class="form-control" placeholder="" ng-model="mvName" required>
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" required>
</div>
<div class="col-xs-2">
Post
</div>
</form>
What I've done before is create a scope variable in your controller:
$scope.formSubmitted = false;
Then in your saveToList function set $scope.formSubmitted to true. From here you have a few options. If you're "Post" button is an actual button then you could set the disabled attribute. You could also check if formSubmitted is true inside your saveToList function and if it is true you don't continue. Or you can change your ng-show to be:
ng-show="myForm.$valid && !formSubmitted"
you can do something like this:
define another $scope.someToggle variable, and assign it true, then at the ng-show of the button add it like ng-show="myForm.$valid && someToggle". then at the end (or in callback) of saveToList($event) function, set $scope.someToggle to false.
also you can put this on both inputs: ng-change = "someToggle = true" so whenever they change(after the save button has been clicked) you'd be able to bring it back...
HTML
<body ng-app="myApp">
<div ng-controller="formCtrl">
<form name="myForm" class row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input name="inputName" type="text" id="urlName" class="form-control" placeholder="" ng-model="mvName" required>
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" required>
</div>
<div class="col-xs-2">
Post
</div>
</form>
</div>
</body>
controller
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.saveToList = function() {
$scope.mvName = '';
$scope.mvUrl = '';
}
});
Alternative
with scope variable without invalidating form
Post
app.controller('formCtrl', function($scope) {
$scope.logicalExp = "||";
$scope.formSubmitted = true;
$scope.saveToList = function() {
$scope.logicalExp = "&&";
$scope.formSubmitted = true;
}
});
the problem with this is, user needs to invalidate the form by himself by removing entered value then hyperlink will be hidden-ed.
I have an angular form as part of a single page App. The 'Continue' button moves a user to the next section of the app, and has an ng-click. I would like to prevent this ng-click from happening when the button is clicked and the form is invalid, but I don't want to disable the Continue button.
Example: A user comes to the page and immediately clicks the Continue button without providing a first name. The error message "You should provide a first name" is shown and the user remains on the page.
How can I do this? Here is the code:
<form name="form" novalidate >
<div ng-show="form.FirstName.$touched && form.FirstName.$error.required" class="errorMessage">
You must enter a first name
</div>
<div class="form-group">
<label for="firstName" class="form-label">First Name</label>
<input id="firstName" class="form-control" name="FirstName" ng-model="vm.user.firstName" required />
</div>
<div class="btn-group">
<button ng-click="vm.next()">Continue</button>
</div>
</form>
Just add form.$valid && before the function call:
<form name="form" novalidate >
<div ng-show="form.FirstName.$touched && form.FirstName.$error.required" class="errorMessage">
You must enter a first name
</div>
<div class="form-group">
<label for="firstName" class="form-label">First Name</label>
<input id="firstName" class="form-control" name="FirstName" ng-model="vm.user.firstName" required />
</div>
<div class="btn-group">
<button ng-click="form.$valid && vm.next()">Continue</button>
</div>
</form>
Either a button is disabled or it's clickable, you can't have it both ways.
What you could do in your controller for vm.next() is say:
myApp.controller('Page1Controller'), ['$scope', function ($scope)
{
$scope.vm = {};
$scope.vm.next = function()
{
if (! $scope.vm.isFormValid())
return;
//move to the next page with your current code
...
}
$scope.vm.isFormValid()
{
$scope.vm.shouldShowError = $scope.form.valid; //add vm.shouldShowError to your error message ng-show in the view so it will display only after clicking continue
return $scope.form.valid;
}
}]);