I am trying to create a form for users who have forgotten their login data. There are three radio buttons and when the user clicks on a radio button and clicks 'OK', the whole content hides and a new form is shown for the option they have chosen. Below the html:
<div id="MainContent">
<form ng-submit="">
<label><input type="radio" name="dataForgotten" id="unForgotten"/>Forgot username</label>
<label><input type="radio" name="dataForgotten" id="pwForgotten"/>Forgot password</label>
<label><input type="radio" name="dataForgotten" id="bothForgotten"/>Forgot both username and pw</label>
<input type="submit" value="OK">
<input type="submit" value="Cancel">
</form>
</div>
How can I make this happen with Angular? I have very little experience with Angular, so I'd really appreciate the help.
Thanks in advance!
There are two ways to achieve the desired effect.
Using ng-if
Using ng-show or ng-hide
The difference is in this, ng-if removes/recreates a portion of the DOM tree based on a Boolean expression i.e. true or false values.
On the other hand ng-show just hides the portion based on the value of the expression. It sets the display of that the part of the DOM to none.
For your case I would favor ng-if so that only the required part of the DOM is loaded into the app at the right time. Some have argued that by changing expressions on the web-inpsector, one could enable or disable an ng-show block.
Here is the Edited code. I have included a plunker. here is the link http://plnkr.co/edit/JB4LAgo9rqtPnPZHpwWr?p=preview
<label><input type="radio" value="unForgotten" ng-model="dataForgotten"/> Forgot username</label>
<br/>
<label><input type="radio" value="pwForgotten" ng-model="dataForgotten"/>Forgot password</label>
<br/>
<label><input type="radio" value="bothForgotten" ng-model="dataForgotten"/>Forgot both username and pw</label>
<div ng-if="dataForgotten == 'unForgotten'">
<!-- If Username Forgotten then Content goes here-->
Username Forgotten
</div>
<div ng-if="dataForgotten == 'pwForgotten'">
<!-- If Password Forgotten then Content goes here-->
Password Forgotten
</div>
<div ng-if="dataForgotten == 'bothForgotten'">
<!-- If Both Forgotten then Content goes here-->
Both Forgotten
</div>
Here is the explanation on the docs as regards ng-if
https://docs.angularjs.org/api/ng/directive/ngIf
While here is the documentation for ng-show https://docs.angularjs.org/api/ng/directive/ngShow
You can use ng-show for this. The directive evaluates a boolean condition and shows the content when true, so to hide one section and show another you just need the inverse.
<div ng-show="!completed">
First Section
</div>
<div ng-show="completed">
Second Section
</div>
On your $scope, you'll have a bool completed property (or whatever you want to call it) and you can change this in your controller when the button is clicked using ng-click.
<button ng-click="changeCompleted()">Show/Hide</button>
Controller:
$scope.changeCompleted = function(){
$scope.completed = !$scope.completed;
}
*Note you could also shorten this part by performing the assignment directly in the ng-click directive.
Here's a working jsfiddle example.
ng-show docs
Also, if you'd like to make sure a radio button is checked before allowing the button to be clicked, have a look at ng-disabled which allows you to conditionally disable/enable your button.
If you want to have it in plain javascript:
Close
function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}
<div id="MainContent">
<form ng-submit="formsubmit(dataForgotten)">
<label><input type="radio" ng-model="dataForgotten" id="unForgotten"/>Forgot username</label>
<label><input type="radio" ng-model="dataForgotten" id="pwForgotten"/>Forgot password</label>
<label><input type="radio" ng-model="dataForgotten" id="bothForgotten"/>Forgot both username and pw</label>
<input type="submit" value="OK">
<input type="submit" value="Cancel">
</form>
<form name="secondForm" ng-show="submited">
</form>
</div>
//controller code
$scope.submited=false;
$scope.formsubmit = {
//form value insert code here
$scope.submited=true;
};
Related
I currently have this UI:
the problem is that when I click one radio button, any preselected button will become unselected. So that's telling me that there aren't different input groups - all of the <input> tags are probably in one big group.
This is probably a pretty vanilla problem, but I am simply not an HTML or Angular expert.
Here is the code for this, there is an outer loop and an inner loop using ng-repeat:
<form name="myQuestionsForm" ng-submit="submit()"> // outer form
<div class="panel panel-default" ng-repeat="q in questions | orderBy:[]">
<h1>{{q.prompt.value}}</h1>
<div class="panel-body">
<form id="aform"> // inner form
<div ng-repeat="c in q.children | orderBy:[]">
<div ng-if="c.kind == 'text'">
<label>
{{c.value}}
<textarea name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value"></textarea>
</label>
</div>
<div ng-if="c.kind == 'checkbox'">
<label>
{{c.value}}
<input type="checkbox" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
<div ng-if="c.kind == 'radio'">
<label>
{{c.value}}
<input type="radio" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
</div>
</form>
</div>
</div>
<div style="text-align: center;">
<button type="submit" class="btn btn--success btn">
<h5>Submit</h5>
</button>
</div>
</form>
Perhaps the reason this is happening is because I have nested forms? Maybe I need to get rid of the outer form?
Group radio buttons with the name attribute.
<input> type attribute
The type of control to display. The default type is text, if this attribute is not specified. Possible values are:
radio: A radio button. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the name attribute are in the same "radio button group". Only one radio button in a group can be selected at a time.
– MDN HTML Element Reference - <input>
See also:
AngularJS input[radio] Directive API Reference
AngularJS ng-value Directive API Reference
AngularJS ng-checked Directive API Reference
I have an ng-repeat with a bunch of radio buttons inside:
<div class="panel panel-default" ng-repeat="offer in vm.offerList">
...
<td ng-show="offer.edit">
<div class="row">
<input type="radio" name="before" ng-model="offer.before" value="false">
<input type="radio" name="before" ng-model="offer.before" value="true">
</div>
</td>
...
</div>
The model offer.before has the correct value, however, when the row is shown, the radio button doesn't appear checked. Why is this happening? I need the radio button to show the selected value.
This is a fiddle example of my problem: http://jsfiddle.net/danielrvt/dpoLdgjq/
Because anything inside attribute value gets toString() like value true will be considered as 'true' & it will looks for 'true'(string) instead of true(boolean).
Better use ng-value instead of value attribute. It will treat true value as in true of type boolean only.
Additionally in your case you have to add name attribute to be unique for each radio button group each offer element radio will be considered as unique form element.
Markup
<div class="row">
{{offer.before}}
<input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="false">
<input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="true">
</div>
Forked Fiddle
So I have a radio button whose model is needed by the function that is called when I hit the button below it:
<form class="form-inline" role="form">
<div class="form-group">
<div>
<input type="radio" ng-model="display" value="true">True <input type="radio" ng-model="display" value="false">False
</div>
<button>
....
</button>
</div>
</form>
However, the results never come back right. If I go in and debug the code, within the javascript every single time the damn value of $scope.display is "true". It doesn't have to do with me not using ng-value, based on what I have read about it, right? Previously, this element worked correctly and was not in a form/form-inline/form-group, but a simple div. Does that have something to do with it?
it does work here is a pluncker: pluncker
<form name="myForm" ng-controller="ExampleController">
<input type="radio" ng-model="display" value="true">true
<input type="radio" ng-model="display" value="false">
false
<br>
display = {{display}}
I have a form with some input type text, input type number, checkbox, radio, a select option and a submit button.
I want to validate each input. If a required input is not filled, I want to display a message.
Here's what happened :
For my first input, the message appears when I did not select a radio and even when I select.
<div class="form-group has-feedback">
I am : <br>
<label class="radio-inline">
<input type="radio" ng-model="sex" name="sex" id="sex" value="femme"> <strong>Woman</strong>
</label>
<label class="radio-inline">
<input type="radio" ng-model="sex" name="sex" id="sex" value="homme"> <strong>Man</strong>
</label>
<div ng-show="form.sex.$error.required">
<p class="help-block">
Sex is required
</p>
</div>
</div>
I miss something it the same for others inputs. I don't see what I am missing ?
Second, I want to disable the submit button when there is an error on a input. This does not work. Here is my code :
<button ng-click="sendMessage();" class="btn btn-success pull-center" ng-disabled="form.$invalid" type="submit">Let me know</button>
You can see the complete code on Plunker.
Thanks for helping
Here is the updated plunker
http://plnkr.co/edit/ZfUE3uEjklJ2pow46Gs8?p=preview
<button ng-click="sendMessage();" class="btn btn-success pull-center" ng-disabled="!myForm.$valid" type="submit">Let me know</button>
use name attribute for all the fields you want to validate.
access error variables using form name. In you case its is "myForm".
You can disable form using the expressions:
myForm.$invalid
!myForm.$valid
name of your application is not correct in ng-app you have mentioned "myapp" and in script file it is "owmuchApp". I have used "owmuchApp" at both the places
First of all, your plunker add an error. You where using
ng-app="myApp"
instead of
ng-app="owmuchApp".
Your validation worked pretty well. I just added the "required" directive to both radio button and... it worked !
See this plunker working
You had 2 problems, first the name of your application module was wrong,
("owmuchApp" in the script.js and "myApp" in the index.html) so the application wasn't even loading.
You need set the ng-required field of the radio buttons group this way:
<input type="radio" ng-model="sex" ng-required="!sex" name="sex" id="sex" value="femme"> Woman
<input type="radio" ng-model="sex" ng-required="!sex" name="sex" id="sex" value="homme"> Man
Here is the working solution
Update
I forget to mention that i added a new condition on the show message:
<div ng-show="form.sex.$dirty && form.sex.$invalid">
<p ng-show="form.sex.$error.required" class="help-block">
Sex is required
</p>
</div>
Will be shown only when the user tries to submit the form, otherwise the message was been shown soon as the form was rendered.
I am attempting to put together a fairly complex form using dojo and dijit widgets. The form has multiple 'sections' which allow the user to attach an existing object (via select tag) or create an entirely new object inline in the form.
My inputs are rendered conditionally based radio buttons and manipulated via javascript. What I am having problems doing, is conditionally making dijit widgets required based on whether the inputs are rendered or not (which itself depends on which radio button is selected.
My html (actually jsp)
<div>
<input id="useExisting" type="radio" name="radio" checked value="useExisting" onclick="renderExistingInput()" /> <label for="useExisting">Use Existing</label>
<input id="new" type="radio" name="radio" value="new" onclick="renderNewInputs()"/> <label for="new">Create New</label>
</div>
<br>
<div id="newInputs">
<div class="row">
<label class="label" for="newName">Name </label>
<span class="formInput"><input type="text" id="newName" name="newName" required="true" dojoType="dijit.form.ValidationTextBox"/></span>
</div>
<!-- More inputs with required="true"-->
<br>
</div>
<div id="existingInput>
<div class="row">
<label class="label" for="existingSelect">Existing Object </label>
<span class="formInput">
<select name="existingSelect" id="existingSelect" dojoType="dijit.form.Select">
<!--JSTL tags for compiling list of options -->
</select>
</span>
</div>
</div>
Accompanying javascript functions:
function renderExistingInput() {
dojo.fx.wipeOut(getWipeArguments('newInputs')).play();
dojo.fx.wipeIn(getWipeArguments('existingInput')).play();
}
function renderNewInputs() {
dojo.fx.wipeOut(getWipeArguments('existingInput')).play();
dojo.fx.wipeIn(getWipeArguments('newInputs')).play();
}
function getWipeArguments(id) {
var wipeArgs = {
node : id
};
return wipeArgs;
}
The basic 'flow' of user interactions is User clicks a radio button, the correct div renders as a result of that. What I want then are inputs that are not rendered to not be considered required. I'm not entirely sure how to do this. Is it possible to manipulate that particular attribute directly via dojo? Or is there a better way to do this entirely?
Seem's like My answer was staring me right in the face. I simply needed to pull together the different parts I had come across. My final function for changed the 'required' attribute looks like:
function setWidgetRequiredAttributes(baseDomNodeId, requiredValue){
foundWidgets = dijit.findWidgets(dojo.byId(baseDomNodeId));
console.log(foundWidgets);
foundWidgets.forEach(function(widget){
widget.required=requiredValue;
});
}