I want the "EnterTemplate" div to be conditionally available based on the radio buttons. I added the text data-bind at the very bottom for testing purposes, and it returns the "true" or "false" value to me based on the radio button values. I am trying to assign the visible binding this value, but nothing is happening. Any suggestions?
<div><h4>Select Instrument Template:</h4></div>
<div id="ChooseModel">
<strong>Would you like to manually insert number?</strong><br />
<input type="radio" name="ChooseModel" value="True" data-bind="checked: RadioOption"/>#Resx.Yes
<input type="radio" name="ChooseModel" value="False" data-bind="checked: RadioOption"/>#Resx.No
</div>
<div id="EnterTemplate" data-bind="visible: RadioOption">
<div><strong>Model Number: </strong></div>
<div><input data-bind="value: ModelNumberString" /></div>
<div><strong>Manufacturer: </strong></div>
<div><input data-bind="value: ManufacturerString" /></div>
<div>Model Number: <strong data-bind="text: ModelNumberString"></strong></div>
<div>Checked: <strong data-bind="text: RadioOption"></strong></div>
</div>
It will be always visible, because any non empty string is always truthy, you should do this:
data-bind="visible: RadioOption() === 'True'"
Or have other property that is boolean.
Related
Have following data passed from backend:
ALL_CONFIGS: {callDigitalIo=true, controllerId=1, numberPlatesHashSalt=..., numberPlatesShouldBeHashed=false, parkingStatusShouldBeChecked=true}
Where boolean params should be displayed like input element with type=checkbox.
Here is how I handle it on UI page (.ftl):
<div>
<label class="col-form-label">
Parking Status Should Be Checked:
<input type="checkbox" class="form-check-input ml-2"
id="parkingStatusShouldBeChecked" name="parkingStatusShouldBeChecked"
<#if parkingStatusShouldBeChecked??>checked="checked"</#if>
/>
</label>
</div>
However, checkboxes are all selected:
Number Plates Should be Hashed should not be selected.
How to select only true variables?
After huge research I found solution for this issue:
<div>
<label class="col-form-label">
Parking Status Should Be Checked:
<input type="checkbox" class="form-check-input ml-2"
id="parkingStatusShouldBeChecked"
<#if parkingStatusShouldBeChecked == "true">checked</#if>
/>
</label>
</div>
It works fine.
Assuming that parkingStatusShouldBeChecked is a boolean, this way works too:
<input type="checkbox" class="form-check-input ml-2"
id="parkingStatusShouldBeChecked" name="parkingStatusShouldBeChecked"
${parkingStatusShouldBeChecked?string('checked','')} />
The first parameter is the "true" expression, so FreeMarker prints checked. Otherwise it prints just an empty string.
See https://freemarker.apache.org/docs/ref_builtins_boolean.html#ref_builtin_string_for_boolean
I have a strange issue on Chrome (75.0.3770.142). I have vue app with form and two text inputs with different names. When I try to autocomplete the first one it fills the second one instead (and the first input stays empty). I cannot reproduce it out of my application.
My component
<template>
<label class="wrapper" :data-error="validation && errors.first(name)" :class="{ error: errors && errors.first(name), label }">
<span class="label" v-if="label">{{label}}</span>
<div class="input" :class="{
'input--search': type === 'search'
}">
<input
v-if="validation"
:aria-label="ariaLabel"
v-shortkey.focus="shortKey"
:disabled="disabled"
:type="type"
:class="classes"
:value="value"
:name="name"
:placeholder="placeholder"
#search="reset"
#input="update"
v-validate="validation"
:autocomplete="autocomplete"
/>
<input
v-else
:aria-label="ariaLabel"
v-shortkey.focus="shortKey"
:disabled="disabled"
:type="type"
:class="classes"
:value="value"
:name="name"
:placeholder="placeholder"
#search="reset"
#input="update"
:autocomplete="autocomplete"
/>
<Icon class="icon" v-if="iconName && !value" :name="iconName" />
</div>
</label>
</template>
Form:
<template>
<form class="form" v-on:submit.prevent>
<slot />
<Input
v-if="isLabel && displayLabel"
class="label"
ref="label"
type="text"
:label="$t('subscriptions.new.label-placeholder')"
name="label"
:validation="{ required: true }"
:value="label"
#input="onLabelChange"
/>
<hr />
<Terms
v-if="!termsAccepted"
:value="terms"
#input="onTermsToggle"
/>
<Button
class="submit button-next"
submit
:disabled="nextDisabled"
#click="next"
>
{{ $t('subscriptions.new.next') }}
</Button>
</form>
</template>
and screen from Chrome
https://imgur.com/a/hMXVLYP
video:
https://imgur.com/a/gOwulXm
I am not familiar with Vue but you can try using input type as tel for telephone field with attributes like name and autocomplete with values as..
<input type="tel" name="phone" id="yourid" placeholder="+1-650-123-1234" autocomplete="tel">
Not setting autocomplete and incorrect input type for the field could be the reason for this behavior.
Hope this helps.
I want to validate the form when user click the submit button using bootstrap and angularjs.If any of the field in the form is blank i want to dislay the error message below the blank elements.
Demo : https://plnkr.co/edit/55lFImusbCznYjLXypDu?p=preview
html code:
<form name="myForm" ng-controller="ExampleController">
<div>Select Color : </div>
<label name="team" ng-repeat="color in colorNames" class="checkbox-inline">
<input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)"> {{color}}
<br> </label><br>
<div ng-show="myForm.$submitted || myForm.color.$touched">
<p class="error-mesg" ng-show="headerForm.color.$error.required">Select the color</p>
</div>
<div class="">
<div style="color: black;">Username : </div>
<input type="text" name="user" value="" required>
<div ng-show="myForm.$submitted || myForm.user.$touched">
<p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
</div>
</div>
<button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)">Submit</button>
</form>
My above code is failing to show error message below the checkboxes when not selected.I want to show an error message "Please Select the color" below the checkboxes when user click on submit button without selecting atleast one checkbox.And when user click on any of the check box the error message should disappear.
You can add dynamically required for checkbox input: ng-required="selectedColor.length === 0"
if you do not select color, checkboxs will be required, when color is selected, then is it unrequired.
<input ng-required="selectedColor.length === 0" oninvalid="this.setCustomValidity('Please select the color')" type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)">
I have the following code and I'm trying to isolate the radio buttons into two xpath expressions so I can click on them in nightwatch for QA.
Please keep in mind this page in particular has many other radio buttons so the expression needs to be specific to this. Also the reactid's are dynamic and change so can't hook into that. Much appreciated
<div class="form-group" data-reactid=".0.1.0.1.0.0">
<label class="control-label" data-reactid=".0.1.0.1.0.0.$label">
<span data-reactid=".0.1.0.1.0.0.$label.1" style="">Able to change e-mail</span>
</label>
<div class="wrapper" data-reactid=".0.1.0.1.0.0.$wrapper" style="">
<input type="radio" name="allow_change_email" checked="" data-reactid=".0.1.0.1.0.0.$wrapper.0:0" style="">
<span data-reactid=".0.1.0.1.0.0.$wrapper.0:1" style=""> Allow</span>
<br data-reactid=".0.1.0.1.0.0.$wrapper.0:2">
<input type="radio" name="allow_change_email" data-reactid=".0.1.0.1.0.0.$wrapper.0:3" style="">
<span data-reactid=".0.1.0.1.0.0.$wrapper.0:4" style=""> Disable</span>
</div>
This is one possible XPath : (formatted for readability)
//label[span='Able to change e-mail']
/following-sibling::div[1]
/input[#type='radio' and following-sibling::span[1][normalize-space()='Allow']]
explanation :
//label[span='Able to change e-mail'] : find label element where child span content equals "Able to change e-mail"
/following-sibling::div[1] : from such label, find the nearest following sibling div element
/input[#type='radio' and following-sibling::span[1][normalize-space()='Allow']] : from such div, return input element where type attribute equals "radio" and the nearest following sibling span equals "Allow"
xpathtester demo
output :
<input checked="" data-reactid=".0.1.0.1.0.0.$wrapper.0:0" name="allow_change_email" style="" type="radio"/>
First, you don't have valid XML.
If you manage to correct it you can use this:
//input[#type='radio']
'Corrected' XML:
<?xml version="1.0" encoding="utf-16"?>
<div class="form-group" data-reactid=".0.1.0.1.0.0">
<label class="control-label" data-reactid=".0.1.0.1.0.0.$label">
<span data-reactid=".0.1.0.1.0.0.$label.1" style="">Able to change e-mail</span>
</label>
<div class="wrapper" data-reactid=".0.1.0.1.0.0.$wrapper" style="">
<input type="radio" name="allow_change_email" checked="" data-reactid=".0.1.0.1.0.0.$wrapper.0:0" style="" />
<span data-reactid=".0.1.0.1.0.0.$wrapper.0:1" style=""> Allow</span>
<br data-reactid=".0.1.0.1.0.0.$wrapper.0:2" />
<input type="radio" name="allow_change_email" data-reactid=".0.1.0.1.0.0.$wrapper.0:3" style="" />
<span data-reactid=".0.1.0.1.0.0.$wrapper.0:4" style=""> Disable</span>
</div>
</div>
I found a solution for anyone else that may be in the same situation.
//*[text()="Able to change email"]/following::span[text()= " Allow"][1]/preceding-sibling::input[1]
For Allow:-
//div[#class='wrapper']/input[1][#type='radio']
For Disable:-
//div[#class='wrapper']/input[2][#type='radio']
I need a four radio button. First iteration generates 2 radio button & second iteration generates 2 radio button. If i select one of the Radio button in first section , then one of the radio button in second selection is also selected. I want two section containing 2 radio button each which dont reflect the changes on each other. Any help pls
<div ng-controller="MainCtrl" >
<div data-ng-repeat="choic in choice" >
<form >
<input ng-model="parent.mustShow" class="label_align" type="radio" name="customer" value="no" ><div class="mediumSubhead"> Information housed </div><br/>
<input ng-model="parent.mustShow" class="label_align" type="radio" name="customer" value="yes" >
<div class="mediumSubhead"> Information housed outside </div></form>
</div>
</div>
Controller.js
var app = angular.module('EquityCompensation', []);
app.controller('MainCtrl', function($scope) {
$scope.choice = [{id: 'choic1'},{id: 'choic2'}];
});
I'd suggest you to put the mustShow variable inside the choice array. So that would help you make the track of the each element. That will make your ng-model declaration to ng-model="choic.mustShow"
And to show the outer input element you could use filter over there that will check that any of the choice has mustShow option is ticked then you show the input element.
Markup
<div data-ng-repeat="choic in choice">
<form>
<input ng-model="choic.mustShow" class="label_align" type="radio" name="customer" value="no">
<div class="mediumSubhead"> Information housed </div>
<br/>
<input ng-model="choic.mustShow" class="label_align" type="radio" name="customer" value="yes">
<div class="mediumSubhead"> Information housed outside </div>
</form>
</div>
<div ng-show="(choice | filter: {mustShow: 'yes'}).length > 0">
<input name="first_name" class="text_box_space" type="text" value="" style="color: black;" size="25" width="200px">
</div>
Demo Plunkr