Angular ngSwitch hiding label element? - javascript

I have some AngularJS code to dynamically create form elements based on an array with form details (input type, value, etc.)
Here's the example code I have for a text input:
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World">
</label>
</div>
</div>
</div>
As you can see, the top-level div is repeated for every form element in the array. The problem, is that when input.input_type equals "text", it doesn't show unless I remove the label tags! I've tried doing label tags without any attributes (<label>...</label>) and it still doesn't show the input unless I remove them.
This is pretty strange, does anyone have any ideas why it would do that? Thanks!
EDIT: Now I've tried removing the input and putting text in (<label>Hello!</label>), and it shows up.....so it just doesn't allow inputs wrapped in a label element? o.O

You need to close your input tag.
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World"/>
</label>
</div>
</div>
</div>

Related

How to select an element having SELECT OPTION tags from Dropdown?

I am using WEBDRIVERIO framework. I have a dropdown in this html syntax. I tried to expand it using ID=question-3
After that I tried all the options using SELECT by options, values, text. But as it is obviously not SELECT DROPDOWN, none worked. I tried to click the locator based on the input or label option, but getting "element not visible" error message.
<div id="question-3" class="question ">
<div class="single-dropdown">
<input type="text" name="input-3" class="js-single-selection" placeholder="gender" data-question-id="3" data-index="3" readonly="" style="width: 77px;">
<div class="single-select-container" style="display: none;">
<div class="single-select-item" data-image="">
<label for="option-0-3" data-open="exampleModal1" class="option-0-3-modal">man</label>
<input type="checkbox" id="option-0-3" data-answer-type="single" data-question-id="3" value="man" data-index="3">
</div>
<div class="single-select-item checked" data-image="">
<label for="option-1-3" data-open="exampleModal1" class="option-1-3-modal">woman</label>
<input type="checkbox" id="option-1-3" data-answer-type="single" data-question-id="3" value="woman" data-index="3">
</div>
</div>
</div>
.</div>
Since html shows an input tag. I would suggest to :
1. type the value in that input box (placeholder="gender")
2. wait for options to appear (Label tag)
3. click the appeared item.(Appeared label)
Also if your scenario fails please provide stack trace for the failure.
I suggest clicking the Select Item (the input in this case), then implementing a wait (See docs: http://webdriver.io/api/utility/waitForVisible.html). And then clicking the dropdown item after you have waited for it to be visible on the screen. Like so...
browser.click(selectItem);
browser.waitForVisible(dropdownItem);
browser.click(dropdownItem);

i18next: overwrites nested items

I'm using i18next to translate my form. It works fine but I have problems with nested items, for example:
<div style="margin-bottom: 25px" class="input-group">
<div class="checkbox">
<label class="form" data-i18n="form.checkbox">
<input type="checkbox" name="checkbox" value="true" required>
</label>
</div>
</div>
After applying the translation, the actual HTML code is like this:
<div style="margin-bottom: 25px" class="input-group">
<div class="checkbox">
<label class="form" data-i18n="form.checkbox">
translated value (no more <input> tag!)
</label>
</div>
</div>
It overwrites the innerHTML with the translation string.
Instead I need to "save" existing items and append the translation after them.
What is the correct use of i18next on a checkbox form entry?
I had the same problem and I solved it like this:
$('[data-i18n]').each(function each() {
const el = $(this);
const contents = el.contents();
el.text(i18n.t($(this).attr('data-i18n')))
.append(contents);
});
Edit:
The above is oversimplifying the problem because, as you pointed out, it won't work for custom attributes.
Therefore I searched a bit more and I found out it's already supported by jquery-i18next#append-content like this:
<label class="form" data-i18n="[append]form.checkbox">
<input type="checkbox" name="checkbox" value="true" required>
</label>
You can either specify a custom attribute or one of the special attributes like prepend, append, etc. to specify where you want the translated text to appear. More info on jquery i18next doc
Example on jsfiddle
I solved in this way:
<div class="checkbox">
<label class="form">
<input id="input_flag2" type="checkbox" name="disclaimer2" value="true" required>
<span data-i18n="form.checkbox"></span>
</label>
</div>
The span tag does the trick, embedding the translated content.

Input not editable in ng-sortable container

I have an issue with input elements within a ng-sortable container.
The inputs are not editable. however I can attach a click event. The values can be changed via the controller.
Here is a Plunler to illustrate the issue:
http://plnkr.co/edit/pNJD26eJdkuuzJVA0ys8?p=preview
<div class="sortable-row" as-sortable="sortableOptions" ng-model="itemsList.items1">
<div ng-repeat="item in itemsList.items1" as-sortable-item>
<div as-sortable-item-handle>{{item.Label}}
<input type="text" ng-model="item.label">//can not be edited
</div>
</div>
Thanks for the help!
this is because your input is inside the as-sortable-item-handle therefore the clicks events are stopped;
You can try to get your input out of the div like this:
<div ng-repeat="item in itemsList.items1 track by item.Id" as-sortable-item>
<div as-sortable-item-handle>{{item.Label}}</div>
<input type="text" ng-model="item.Label">
</div>
Then you can edit the inputs content freely, hope that helps !

AngularJS : form validation not working on hidden input

I have a form splitted in 4 steps (I made a form "wizard" using ng-switch), the submit button is on the last page of the wizard. I have some troubles making the angular form validation to work . It seems that the formName.$invalid only watches the inputs of the current step of the form.
<form name="carouselForm">
<div ng-switch="modal.getCurrentStep()" class="slide-frame">
<div ng-switch-when="general" class="wave row">
....
</div>
<div ng-switch-when="carousel" class="wave row">
<div class="col-md-12">
<div class="form-group"
ng-class="">
<label for="Title">
Title <span class="red">*</span>
</label>
<div>
<input id="Title"
ng-model="entityData.Title"
type="text"
required
placeholder="" class="form-control input-md">
</div>
</div>
</div>
</div>
<div ng-switch-when="details" class="wave row">
.....
</div>
<div ng-switch-when="description" class="wave row">
.....
</div>
</div>
</form>
I removed most of the form cause it would have been very long. In step two I left an input with the required tag. On this step the carouselForm.$invalid is properly set to true if this field is not set, but as soon as I change to the next step, carouselForm.$invalid is false again even if I didn't filled the required input.
It seems that the angular form validation doesn't watch the inputs in my other ng-switch block. Is there a way to make include them into the validation ?
Thank you very much !
You can replace ng-switch-when by ng-show, that way it doesn't get removed from the DOM, but is hidden using CSS.

Replace text in input fields with a CSS generated image

I have input fields with value of ON or Off which I would like to replace with CSS generated image. Is this possible? I asked a similar question but about cells in a table. And I can replace the cell values with the CSS generated images. But I've been fiddling around with INPUT Type=text fields and can't figure out a way to do the same replacement with input type fields. I have seen some here that use a pic stored in a url. But it would be great to use the CSS generated image instead of linking to a pic.
The code (html, css, js) is here.
<div class="kn-input kn-input-short_text" id="kn-input-field_95">
<label for="field_95" class="knack-input-label">
<span class="kn-input-label">Cash</span>
</label>
<div class="input">
<input id="field_95" type="text" value="On">
</div>
</div>
<div class="kn-input kn-input-short_text" id="kn-input-field_95">
<label for="field_97" class="knack-input-label">
<span class="kn-input-label">Internet</span>
</label>
<div class="input">
<input id="field_97" type="text" value="On">
</div>
</div>
sOn = '<div class="button-wrap"> <div class="button-out">On</div> <div class="button-switch"></div> </div>'
$('span:contains("On")').html(sOn);
The last line of code is what works to replace cell values in a table. I don't know how to do the same for input field values.
To replace the input fields, just do exactly that:
$("input[type='text'][value='On']").replaceWith(sOn);
Your FIDDLE updated with above line.

Categories

Resources