I'm using 4 accordions on an page using AngularJS that houses 6 inputs each. There are single inputs as well. When the accordion is collapsed only the first input field is displayed. There is validation on the fields in the accordion. The problem I'm having is that if there is an error on an input field that is hidden because the accordion is collapsed, the user will never know. I want to display an error that displays above the accordion. Does Angular offer something that detects an error in a group of input fields without having to check every input field? i.e.
<div ng-show="formname.submitted || formname.input1.$touched || formname.input2.$touched || etc">
<span class="error">issues</span>
</div>
Related
We have a section of our website where users can submit data. This section allows users to add additional entries and submit them all at once. We had to rewrite this section after we updated the version of AngularJS the site used to the most recent. When a user first accesses the page, the first entry is ready and available for the user to fill out. They can click on a button and it will add another entry. These entries can be navigated via tabs. Once a second entry has been added and a radio button selected, the selected radio button on the first entry is deselected in the view. If you go back to the first entry and re-select a radio button, any selected radio button on the second entry is de-selected. Checking the model, the values are still stored and if the user saves, then the correct values are saved to the database. I don't know if it matters in this case, but the radio button options are populated via data from the database. Everything in the controller appears to be working correctly.
Here is a concentrated bit from the template:
<uib-tabset active="activeTabIndex" ng-show="!nothingToShow && showThisStuff">
<uib-tab ng-repeat="entry in things.items" active="{{entry.active}}" ng-model="entry">
<uib-tab-heading>Heading Here</uib-tab-heading>
<div>
<!-- some other stuff here -->
<div>
<label>Label Here</label>
<br />
<div ng-repeat="input in inputTypes">
<input name="inputTypes" type="radio" data-ng-value="input.theTypeId" ng-model="entry.theTypeId">
<label>{{input.localizedName | translate}}</label>
</div>
</div>
<!-- More stuff here-->
</div>
</uib-tab>
</uib-tabset>
I have a feeling that I'm not doing something right since ng-repeat is involved, but I feel that since the selection points to entry that multiple entries should be isolated from each other. Very well could be wrong, though.
Here's a list of things I've looked at to try and resolve this issue:
AngularJS - ng-repeat multiple radio button groups, values to array
AngularJS - Using ng-repeat to create sets of radio inputs
AngularJs: Binding ng-model to a list of radio buttons
AngularJS multiple radio options
Selected value in radio button group not retained in angularjs
How can I get the selected values of several radio buttons to be bound to an object (model)?
If I understand you correctly, you try to set multiple selection instead of single selection, do you?
Try one of the following: either remove the 'name' attribute from the input, or use $index in order to give every input its unique name (example: name="inputTypes_{{$index}}").
I am Struggle With Dynamic Form Validation In My Current Project, in my Form Having Two Fields like User Name and Email, Both Are Mandatory.
If User Click Add-More(Up to 2 times only) Button Then Same above fields are came. those two fields are also Mandatory. if user removes those fields validation will not be work
I Already Wrote those 2 fields(3 times) just, I Kept ng-hide and ng-show,
And My Code is below,
enter code here
I have Added My Code To Plunker:
http://plnkr.co/edit/ErJl2Kg8maOn5GLaz9mb?p=preview
Avoid to use ng-hide or ng-show.
Prepare on model i.e. JSON Array and bind using ng-repeat and write associated code in JavaScript.
Example: Click here for Example
Use ng-required="showUser2" instead of just required.
In an AngularJS-form a field is still required even when its hidden.
That means when you hide your required form input field with ng-hide or ng-show then the AngularJS FormController completeProfile still treats the form as $invalid.
To get dynamic forms how you want them you can use ng-if to hide your unwanted input fields. Input fields inside of a ng-if are not considered by the form validation logic.
I updated your Plunker. The submit button is only shown when the form is valid.
We have inputs with placeholders like this:
<input placeholder="Search..." type="text" />
Everything is fine in chrome/firefox, but in IE sometimes when we are hiding and showing the element, the placeholder becomes the input value -- you click on the input and your cursor is after the 3 dots of
"Search...(blinking cursor here)"
The inputs are in an angularJS ngView and we use ngShow and ngHide to show/hide them based on various logic.
When the view first renders you can click in the input and it removes the placeholder as expected, but after the input is hidden and then shown once or twice the problem starts.
We have even tried recreating the browsers html5 placeholder behaviour with javascript, binding to its blur/focus events and using the inputs value but we actually get the same behavior attempting doing them that way too.
We originally tried to use a placeholder.js thinking it was related to IE 8 or less not being great with html5... but we get this issue in up to IE11 as well.
I could have been in a search for this. Once the form is submitted , if the errors are available it shows on top as the validation summary (May be it will be done). Here is the critical. When i click on the error message, the focus should go to the corresponding error field. The field may be in the same tab or other tabs or other panels etc
Could it be possible to achieve?
A simple way to achieve that would be to make the error message a label for that particular field:
<label for="myField">some error</label>
&
<input id="myField">
Clicking on the message would then automatically focus the field, no matter how far in the DOM the two elements are from each other.
An input can also be focused by JavaScript (see .focus() documentation). In both cases, the input needs to actually be present in the DOM before it can be focused.
I am working on a form that contains a grid panel with checkbox selection model to select users. After the submission the users ID's (as well as other form field values) are POSTed to the server. This works perfect.
But I need to add a custom validation for that special (custom) field - if no user is selected, display an error icon with an error tooltip text. Here is the custom field component screenshot:
As You can see within the image, there is a title (done by xtype: label), then an empty space, that is currently filled with label with no text (the area marked by red rectangle) and the grid itself. If I select a user (or more), their names (blanked data) are displayed in that empty label.
But within a process of validation I need to show an error icon with tooltip somewhere here if no user is selected.
I can check for the selected data using
grid.getSelectionModel().getSelection().length > 0 ? true : false
therefore I am wise of the selection is valid or not, but I do not know how to display that error icon, nor where should I best display it. I think the best position for that icon should be within the section title label (either left or right, this does not matter that much).
Any help on how to display that icon is highly appreciated!
As nobody answered and I found a solution myself, I want to put it here so that maybe somebody could tell me about a better approach.
So after the validation
if(grid.getSelectionModel().getSelection().length > 0) {
// valid, let's submit the form...
} else {
// invalid, let's show the error hint
}
I only need to address the concrete label and set the text for it - while adding a concrete HTML markup that is the same as of when error icon is displayed by calling form.isValid():
label.setText(myPreviousText
+ '<span role="presentation" class="x-form-error-msg x-form-invalid-icon" data-errorqtip="<ul class="x-list-plain"><li role="alert">'
+ 'MY ERROR MESSAGE'
+ '</li></ul>" style="display: inline-block;"></span>', false);
Now I have the error icon with a styled hint. I set the label text back (set back to valid) on grid.select event and check the validity again on grid.deselect event.