In the form I am designing, I would like to show a < input="date"> field for anniversary-date if the user selects a radio button with value = "married".
For now, I have replaced the same with a div saying "Anniversary date input will appear here".
My problem is that, user.maritalStatus == 'married' is always set to false.
I know this because ng-show doesn't show the message. ng-hide shows this message.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-group">
<div class="btn-group col-md-6 col-md-offset-4" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="maritalStatusRadioBtn" value="single" data-ng-model="user.maritalStatus">Single
</label>
<label class="btn btn-default">
<input type="radio" name="maritalStatusRadioBtn" value="married" data-ng-model="user.maritalStatus">Married
</label>
</div>
</div>
<!-- following does NOT work -->
<div data-ng-show="user.maritalStatus == 'married'">Anniversary date input will appear here</div>
I followed these examples:
http://codepen.io/SusanneLundblad/pen/iBhoJ
OnClick radio button show hide div angular js - the one answered by michael (highest upvotes)
but I am not getting it to work.
Thanks!
EDIT:
Codepen link: http://codepen.io/vipulnj/pen/KperpO
You would need to wrap your content inside <div ng-app=""> </div> if you have not already
Related
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.
There are two buttons, through which popup is opened,
I have input field in that popup and applied validations on that input field.
If I close the popup and clicks on second button then input value is already got filled, because I used same input field to reduce code.
How to reset that ng-model value of input field?
I tried to set it null on click of close button, but after clicking on second button it set null but shows valiation errors on first time.
How to achieve this functionality using same input field?
<form name="vm.pvtZipCodeSearchForm" id="pvtZipCodeSearchForm" class="clearfix">
<div class="alert alert-danger" ng-if="vm.errorMsg">{{vm.InvalidAddressError}}</div>
<fieldset class="form-control form-control-wrapper">
<div class="fields">
<input type="text" class="form-control" placeholder="{{vm.lang.tcZipCode}}Postnummer*" title="{{vm.lang.tcZipCode}}*" name="zipCode" maxlength="5" ng-model="vm.tariff.zipCode" ng-maxlength="5" ng-minlength="5" ng-required="!disable" />
<div ng-if="vm.isValidForm" class="error-message" ng-messages="vm.pvtZipCodeSearchForm.zipCode.$error" role="alert">
<div ng-message="required">{{vm.lang.errMsgBlankField}}</div>
<div ng-message="minlength">{{vm.lang.errMsgShortField}}</div>
<div ng-message="maxlength">{{vm.lang.errMsgLongField}}</div>
</div>
</div>
<br />
<div class="fields tac">
<button type="button" ng-click="vm.tcSearchZipCode()" class="tc___button--search">{{vm.lang.search}}</button>
</div>
</fieldset>
</form>
You can try setting
vm.pvtZipCodeSearchForm.zipCode.$pristine = true;
in the following code I have one drop-down list (serviceSmallId) for type of service.
It is populated using model info.
There is a second field check-box which should only be visible when drop-down has a selected value of 'Weekly'. I am trying to use ng-show/ hide of angular.
I tried to search for possible solutions but no luck.
Can anyone please guide me what I am doing wrong.
<section id="scrubber-view" class="mainbar" data-ng-controller="scrubber as vm">
<section class="matter">
<div class="container">
<div>
<button class="btn btn-info" ng-click="vm.goBack()"><i class="fa fa-arrow-left"></i>Back</button>
<button class="btn btn-info" ng-click="vm.cancel()" ng-disabled="!vm.canSave"><i class="fa fa-undo"></i>Cancel</button>
<button class="btn btn-info" ng-click="vm.save()" ng-disabled="!vm.canSave"><i class="fa fa-save"></i>Save</button>
<span ng-show="vm.hasChanges" style="color:orange" class="dissolve-animation ng-hide"><i class="fa fa-asterisk"></i></span>
</div>
<div class="row">
<div class="widget wblue">
<div data-cc-widget-header title="{{vm.title}}" subtitle="{{vm.scrubber.scrubberId}}"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="serviceSmallId" class="col-sm-2">Service</label>
<div class="col-sm-4">
<select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']">
</select>
</div>
</div>
<div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
<input class="form-control" type="checkbox" id="fullyFlanged" value="Bar" />
</div>
</form>
</div>
</div>
</div>
</section>
</section>
There probably is a more elegant "angular way" solution,
but I updated you code to work here - http://jsbin.com/tupisoriho/1/edit?html,js,output
Explanation of changes
Provided ng-show a value vm.checker
added ng-change to the select element and gave it a function checkerGo which tested to see if dropdown == 'weekly', if yes change vm.checker
Update
there is a more "angular way" - using expressions!
As per #Omri Aharon fiddle/comment below.
You don't need to get the value property because a ng-model don't hold the element but the value itself;
<div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
must be
<div class="form-group" ng-show="vm.scrubber.serviceSmallId == 'Weekly'">
EDIT: In your case vm.scrubber.serviceSmallId will contain the ID and not the description Weekly. I suggest you to use ng-change directive to call a function in your controller that will find the item based on ID and set in the controller to be visible for ng-show.
<select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']"
ng-change="vm.selectObj()">
vm.selectObj() will find and set the current selected object in the scope to an controller variable (ex.: vm.selectedItem) and:
<div class="form-group" ng-show="vm.selectedItem.description=='Weekly'">
I have a form with some fields (build with ng-repeat, so I dont know how much). I added to the submit button
ng-disabled=form.field.$invalid
and added to all the fields "required" but the ng-disabled work just for this last field. my code:
<form name="form" novalidate>
<div ng-repeat="q in questions">
<textarea name="answer" type="text" ng-model="answers[$index]" required></textarea>
</div>
<button ng-disabled="form.answer.$invalid || form.answer.$pristine" type="submit" ng-click="submit(q)">'Submit'</button>
</form>
how can I validate the user change all fields? thanks!
That is because all your inputs have the same name, hence the behavior due to the form controller instance will have just one property with the name answers and it will point to the last ng-model with that name in the form. Instead provide different names for your inputs using ng-attr-name with probably appending $index and use $invalid property of the form, form will be invalid as long as one of the ng-model(s) (with constraints) within the form is invalid. So just disable the button until the form is invalid since it is a catch-all property on the form controller.
<div ng-repeat="q in questions">
<!-- Provide dynamic form names -->
<textarea ng-attr-name="answer{{$index}}" type="text"
ng-model="answers[$index]" required></textarea>
</div>
<!-- Use form.$invalid -->
<button ng-disabled="form.$invalid || form.$pristine"
type="submit" ng-click="submit(q)">Submit</button>
angular.module('app', []).controller('ctrl', function($scope) {
$scope.questions = ["q1", "q2"]
$scope.answers = {};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="form" novalidate>
<div ng-repeat="q in questions">
<textarea ng-attr-name="answer{{$index}}" type="text" ng-model="answers[$index]" required></textarea>
</div>
<button ng-disabled="form.$invalid || form.$pristine" type="submit" ng-click="submit(q)">Submit</button>
</form>
</div>
I have a page where multiple forms are created based on ng-repeat. Everything works fine until write something into the input and everything gets duplicated on all the other repeated forms input elements. I have used ng-model="Notify.message" which is nothing but object which takes the value from the input and sends to control on button submit and hence rest of the logic.
I am looking for when if one form is been filled, other forms should keep quite and shouldn't duplicate the values written in input text of form 1.
Here is the code:
<div data-ng-show="alluserposts.length > 0">
<div id="b{{userpost.id}}" data-ng-repeat="userpost in alluserposts" >
<div class="row" style="margin-left: -5px">
<form class="text-center" role="form" id=f1{{userpost.id}} name="userForm"
ng-submit="notify(userForm.$valid, userpost, apiMe)" novalidate>
<div class="row">
<div class="col-xs-8 col-md-4">
<div class="form-group">
<input data-container="body" data-toggle="popover" data-placement="top"
data-content="Any message which you would like to convey to post owner"
type="text" ng-model="Notify.message" data-ng-init="Notify.message=''"
id="u{{userpost.id}}"
placeholder="Enter a Message or Phone number" class="form-control"
required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">It is
required.</p>
<script>$(function () {
$("[data-toggle='popover']").popover();
});
</script>
<input type="hidden" ng-model="Notify.loggedInEmail"
ng-init="Notify.loggedInEmail = result.email"/>
<input type="hidden" ng-model="Notify.postId" ng-init="Notify.postId = userpost.id"/>
<input type="hidden" ng-model="Notify.destEmail"
ng-init="Notify.destEmail = userpost.userEmail"/>
</div>
</div>
<div ng-show="loginStatus.status == 'connected'" class="col-xs-4 col-md-2">
<button class="btn btn-primary" ng-disabled="userForm.$invalid || !userForm.$dirty"
type="submit">
Notify Post Owner
</button>
</div>
</div>
</form>
</p>
</div>
</div>
</div>
</div>
Issue fiddle - jsfiddle
Here you can when something is written in one input, other gets filled too :( . Also Notify is a Java mapped object and message is a variable inside it. Pls let me know how can this can be segragated!
You bind all of your inputs to same variable on $scope.
You must bind every text box to a distinct variable on $scope:
View:
<ul ng-repeat="post in posts">
<li>{{$index}}
<input type="text" ng-model="emails[$index]"/>
</li>
</ul>
Controller:
$scope.emails = [];
I am also at the starting phase of angularjs.
I have faced the same issue few days ago and resolved it by providing dynamic model name in ng-model like
<input type="text" ng-model="Notify[post.userEmail]" ng-init="Notify[post.userEmail] = post.userEmail" />
Working fiddle: Fiddle