I am trying to show/hide and adjust the ng-required status if a checkbox is checked, but it doesn't seem to managing the variables properly. Here my examples:
<input type="checkbox" ng-model="checkboxdmodel.value" ng-true-value="'YES'" ng-false-value="'NO'">
Input that I want required unless the checkbox is checked in which case it should be hidden and not required:
<div class="form-group" ng-hide="checked.YES">
<label class="col-sm-3 control-label" for="inputamount">
<font color="red">*</font>Expense Amount</label>
<div class="col-sm-8">
<input type="number" class="form-control" id="inputamount" data-ng-model="itemamount" step="any" ng-required="checked.NO"/>
</div>
</div>
http://plnkr.co/edit/F4hdqWwhIWiqvsJl5ETx?p=preview
No need for the ng-true and ng-false.
Because checked and unchecked states of the checkbox evaluate to truthy or untruthy, you can just drop the checkbox ng-model value right into wherever you want. In the case of the ng-required, just invert the value with !.
Related
I have one div which contains multiple types of input types. i.e., text, radio, checkbox...
I want to make the div mandatory. That means If I check the radio or check box or enter a value into the text field the mandatory condition satisfies. i.e, selecting any one of them satisfies the condition. If all are left without any value I must display angular messages(ng-messages) below the div.
This code is generated dynamically from Javascript. So validations should be done when I submit the form.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div id="div1"><!--This div is mandatory-->
<input type="checkbox" name="div1" value="SomeValue" ng-model="vm.check1">Some<br/>
<input type="checkbox" name="div1" value="SomeValue2" ng-model="vm.check2">Some2<br/>
<input type="radio" name="div1" value="Male">Male<br/>
<input type="radio" name="div1" value="Female">Female<br/>
<input type="text" name="div1" ng-model="text1"><br/>
</div>
<div></div><!--Should display ng-messages here if none of the above selected.-->
<br/><br/>
<div id="div2"><!--This div is mandatory-->
<input type="checkbox" name="div2" value="SomeValue" ng-model="vm.check3">Some<br/>
<input type="checkbox" name="div2" value="SomeValue2" ng-model="vm.check4">Some2<br/>
</div>
<div></div><!--Should display ng-messages here if none of the above selected.-->
is there any possibility to achieve this?
Yes, you could do that just by wrapping all group of input fields under fieldset and then apply required attribute over that fieldset.
Make sure name attribute of each field should be different in order to consider each field as different. It can be same name for gender radio button.
<!--Below field input fields are mandatory now-->
<fieldset id="div1" required="">
<input type="checkbox" name="check1" value="SomeValue" ng-model="vm.check1">Some<br/>
<input type="checkbox" name="check2" value="SomeValue2" ng-model="vm.check2">Some2<br/>
<input type="radio" name="gender" value="Male">Male<br/>
<input type="radio" name="gender" value="Female">Female<br/>
<input type="text" name="text1" ng-model="text1"><br/>
</fieldset>
I passed an array value in my view with $userdata.
In my view, there's a button there that will show a modal when triggered. This modal will show the user data using the $userdata variable.
Now, I used angular js for my form inputs.
For example:
div class="form-group">
<label for="company_name" class="col-sm-12 control-label">Company Name</label>
<div id="company_name" class="col-sm-12">
<input type="text" class="form-control" name="company_name" value="{{$userData['company']['name']}}" ng-model="user.company_name" ng-required="true">
</div>
<div class="col-sm-12">
<span ng-show="userForm.company_name.$error.required && userForm.company_name.$touched"><br> <small><i>Name field is required</i></small></span>
</div>
</div>
The problem here is the input is not showing any value.
Why so? But when I removed the ng-model and just used a plain input field, the value will be shown.
You have to remove value="..." from input, ng-model will control it. look at this example.
<input type="text" class="form-control" name="company_name" ng-model="user.company_name" ng-required="true">
I am trying to follow the angular docs for radio buttons.
https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
Don't know what I'm doing wrong.
Ultimately, I want the div "stuff" to have class "muted" if radio option 3 is selected.
my html:
<form name="shippingVm.MasterCartonForm" ng-controller="shippingControler as shippingVm" >
[{{shippingVm.shipOption.val}}]
<div class="col-sm-3 col-sm-offset-1">
<label class="radio-inline">
<input type="radio" ng-model="shippingVm.shipOption.val" name="shippingOptions" ng-value="one" />
I will call Purolator for a pickup.
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input type="radio" ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="two" />
I will deliver them to Purolator.
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="muted" />
I will deliver them to the Wizmo warehouse myself.
</label>
</div>
<div class="ng-class="shippingVm.shipOption.val">
stuff
</div>
</form>
my controller:
vm.shipOption = {val: "NOT-muted"};
This debugging line in the HTML checks to see if I'm getting the right value:
[{{shippingVm.shipOption.val}}]
It starts with [NOT-muted] - as it should. But the moment I select any radio button it goes blank.
According to the docs, clicking a radio should pass the radio's value into the model.
What am I missing?
Your ng-class is incorrect. See the below snippet for an example of what it should be. The second problem is that you want value instead of ng-value. From: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
value The value to which the ngModel expression should be set when selected. Note that value only supports string values, i.e. the scope model needs to be a string, too. Use ngValue if you need complex models (number, object, ...).
ngValue Angular expression to which ngModel will be be set when the radio is selected. Should be used instead of the value attribute if you need a non-string ngModel (boolean, array, ...).
.muted {
color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<label>Chicken or the Egg?</label>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">Chicken
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">Egg
</label>
</div>
</div>
<div ng-class="{'muted': formData.chickenEgg === 'egg'}">
stuff
</div>
</div>
Oh, I see it now.
The radio buttons should have value="muted" not ng-value="muted".
ng-value is only used in a special case.
I have a angujarJS application and I have a form with hidden rows. when 'Yes' is selected to the trigger row, another row is displayed with a 'Yes' and 'No' radio button on.
What I'm trying to do is clear any selected radio button for the hidden row if 'No' is selected in my trigger row but I cant figure it out at all.
Its probably easy but I'm just code blind with it.
Trigger row
<div class="row">
<label class="col-sm-7 col-md-6">Show hidden row?</label>
<div class="col-sm-4">
<input name="firstgroup" type="radio" ng-model="transferitems.firstgroup" value="Yes" required />Yes
<input name="firstgroup" type="radio" ng-model="transferitems.firstgroup" value="No" required />No
</div>
</div>
Hidden row
<div class="row" ng-show="transferitems.firstgroup == 'Yes'">
<label class="col-sm-7 col-md-6">Is hidden row displayed?</label>
<div class="col-sm-4">
<input name="secondgroup" type="radio" ng-model="transferitems.secondgroup" value="Yes" required />Yes
<input name="secondgroup" type="radio" ng-model="transferitems.secondgroup" value="No" required />No
</div>
</div>
You can condense Neel's answer and put the assigment directly in the ng-click expression on the 'No' element. It is a more compact and don't have to have extra function in $scope.
Like so:
<input name="firstgroup" type="radio" ng-model="transferitems.firstgroup"
ng-click="transferitems.secondgroup=''" value="No" required />No
If you add ng-click on trigger row like
<input name="firstgroup" type="radio" ng-model="transferitems.firstgroup" value="No" ng-click="triggerChange()" required />
Then you can define a scope function where you would check the first row trigger condition and accordingly clear hidden radio buttons.
$scope.triggerChange = function(){
if($scope.transferitems.firstgroup=="No"){
$scope.transferitems.secondgroup='';
}
}
Another way is to pass $event to ng-click="triggerChange($event)"
then you can compare value
if(event.target.value == "No"){
$scope.transferitems.secondgroup='';
}
I have a form with input texts that are looped in a ng-repeat.
For every input field there is a switch with which the user sets "Use default value" to YES/NO.
Every row of input fields are basically two fields, with one hidden one at a time, whether you want to show the default value (switch: YES, input text = disabled) or set a custom value (switch: NO)
I need each element to have a unique identifier to be able to save it on submit, for example **id="title_{{spec.id}}".
The switches work so that the switch-variable is used to create 2way binding, but it is the value of the checkbox within the Switch-DIV that will be saved to the database.
What I think I need to do is apply the spec.id value to the switch-variable="useDefaultValue_{{spec.id}}" and set the same value to the ng-show="useDefaultValue_{{spec.id}}" and ng-hide, but I don't know how to.
HTML:
<div class="row form-group" ng-repeat="spec in specsList">
<div class="col-xs-6 col-md-6">
<label for="specification_">{{spec.title}} <span ng-show="spec.unit.length">({{spec.unit}})</span></label>
<input class="form-control" type="text" name="title_{{spec.id}}" id="title_{{spec.id}}" placeholder="Not visible" ng-model="spec.value" ng-hide="useDefaultValue">
<input class="form-control" type="text" ng-model="spec.defaultValue" ng-show="useDefaultValue" disabled>
</div>
<div class="col-xs-6 col-md-6">
<label for="useDefaultValue_">Use default value</label> - {{spec.useDefaultValue}}<br />
<div class="switch" init-switch switch-variable="useDefaultValue">
<input type="checkbox" id="useDefaultValue_{{spec.id}}" name="useDefaultValue_{{spec.id}}" ng-model="spec.useDefaultValue">
</div>
</div>
</div>
Since your checkbox is backed by the row-dependent spec.defaultValue, you can come up with a simpler solution and don't need the switch. Just reference spec.useDefaultValue instead of your current useDefaultValue to directly access it.
<div class="row form-group" ng-repeat="spec in specsList">
<div class="col-xs-6 col-md-6">
<label for="specification_">{{spec.title}} <span ng-show="spec.unit.length">({{spec.unit}})</span></label>
<input class="form-control" type="text" name="title_{{spec.id}}" id="title_{{spec.id}}" placeholder="Not visible" ng-model="spec.value" ng-hide="spec.useDefaultValue">
<input class="form-control" type="text" name="title_{{spec.id}}" id="title_{{spec.id}}" ng-model="spec.defaultValue" ng-show="spec.useDefaultValue" disabled>
</div>
<div class="col-xs-6 col-md-6">
<label for="useDefaultValue_">Use default value</label> - {{spec.useDefaultValue}}<br />
<input type="checkbox" ng-model="spec.useDefaultValue">
</div>
</div>
As an aside, I would also use ng-if instead of ng-show and ng-hide to lighten the page and make the transitions smoother.
EDIT Submit function :
$scope.submit = function() {
angular.forEach(specsList, function(spec, index) {
if (spec.useDefaultValue) {
$scope.user[spec.title] = spec.defaultValue;
}
else {
$scope.user[spec.title] = spec.value;
}
});
User.save(user).$promise.then(function(persisted) {
// do some post-save cleanup
});
};
Of course, this is assuming you save spec values on the user. They could be stored somewhere else.