I'm just curious if anyone else has had any issues with FormControl's and radio buttons. We recently updated to Angular2 v4 and radio controls which were working before have stopped. Given the below HTML and an associated FormGroup (not shown), the radio buttons can both be selected. I really hope I'm just overlooking something simple but was curious if anyone else has experienced similar behavior.
<input type="radio" formControlName="fcAdjustmentType" value="amount"/> <label>Amount</label>
<input type="radio" formControlName="fcAdjustmentType" value="percentage"/> <label>Percentage</label>
And before it's mentioned, the "name" attribute on the element is optional according to Angular:
Blockquote When using radio buttons in a reactive form, radio buttons in the same group should have the same formControlName. You can also add a name attribute, but it's optional.
Related
Recenty, I noticed that the checkboxes that I wrote a click event worked incorrectly from time to time. Not everytime but sometimes their #click event works in reverse. Here is what I am trying to tell;
<label class="form-switch">
<input type="checkbox" #click="showElement = !showElement"/>
</label>
I have a simple form switch and there are some css on it which I didn't put here, it looks like a toggle switch. It toggles a data which is showElement. The default state of the data is false and when you click on the toggle it becomes true and false respectively.
<div v-show="showElement>
some content here
</div>
When the showElement is true I want to display the above div, and when it becomes false, I want it to be hidden. There is no problem with that. But here is my question;
If my observation is corret, usually when the project is started for the first time, in other words, when I type npm run serve and start the project, I immadiately go and check if it is working fine or not so I click on the checkbox very quickly over and over andsometimes the click event breaks down and starts working backwards. I mean, when the switch is off, the content is visible, when it is false, the div is showing, but it should be reversed. This happens sometimes when I browse the other pages of the project and return to this component. Is this a bug? Or am I doing something wrong? In the first version of the code it was like below;
<label class="form-switch" #click="showElement = !showElement>
<input type="checkbox"/>
</label>
I accidentally typed the click event to the label element instead of input. I thought that might be the problem. I am still thinking that is the problem but the bug that I explained above still happens sometimes. Do you know why? Can anyone explain?
Usually i find that with checkboxes in VueJS #Click is not the way to go. Try to use #Change event instead. This should make it more consistent.
The reason behind this is that the click event triggers before the value has been updated. Therefore creating the risk of it overwriting the old value instead of the newly updated one
EDIT:
I actually think in this case you might even be able to get around this by simply adding a v-model to the checkbox like so:
v-model="showElement" instead of having either #click or #change.
Verison 1:
<label class="form-switch">
<input type="checkbox" #change="showElement = !showElement"/>
</label>
Version 2:
<label class="form-switch">
<input type="checkbox" v-model="showElement"/>
</label>
Check this fiddle: https://jsfiddle.net/x4wykp2u/4/
Hope this makes sense
I want to click a radio button out of 10 radio buttons on a webpage but each radio button tag is exactly same inside Div/INPUT tag, i.e for each radio button values are exactly same and hence not able to derive a xpath to click on it. Can't use contains text to levarage radio button name as radio button name is in different SPAN tag so can't use that as a reference, Please help me: below is the code :
<div class="classname">
<input name="category.value" type="radio" class="classname">
</input>
<span class="classname">Radio button Name</span>
driver.find_element_by_xpath("//span[#class='classname']/input[#value=1]").click()
Your HTML must have some kind of return type, maybe value or name. I belive you can use that.
Mentioned in the comments can you please try:
//span[text()='Radio button Name']/preceding-sibling::input[1]
Not that this is case sensitive.
This works based on the html provided:
If it doesn't work for you can you please verify your HTML. There are lots of other ways of getting the element. If you need to modify the html just do it and let us know :-)
I want to create a radio button in a .cshtml file. This simple code is not rendering a radio button in Safari:
<input type="radio" value="1" name="testme"/>
It works perfectly in IE8, but in Safari 5.1.7, radio buttons are not rendered. This happens only for .cshtml files.
You should have unique ids. Right now all your input fields have the same id which is invalid HTML. I don't if the rendering issue is related to this but it's a problem that needs fixing. Also AFAIK param is an invalid attribute for the <input> element.
I removed the overflow:hidden style for the <td> which was causing the radio button not to be rendered in Safari - overflow:hidden is behaving differently in Safari.
<input id="inputID" class="textfield" name="myData" maxLength="5" type="text" autocomplete="off">
I was looking for a way to fill the input box programmatically but there is no value attribute...
I tried element.SetAttribute("value", "blahblah");
Any ideas?
It involves C# Windows Forms Webbrowser.
edit: My thanks go to the only one who responded to my post. I've found a better answer for me which is to set the InnerText and then programmatically click the element so it would behave like if I typed something. I am still wandering though whether I could use SetAttribute or not.
If you include the 'runat="server"' attribute in your input tag, then you should be able to access it from the code-behind. For example:
<input id="inputID" class="textfield" name="myData" maxLength="5" type="text" autocomplete="off" runat="server"/>
can be accessed as such:
inputID.Value = "New Text";
Another StackOverflow article explains this: Accessing HTML Elements in ASP.Net.
I have listeners on the event of radio being checked, which works perfect for the first time.
But if I refresh the page,the radio input is checked because of browser cache,and the event is not fired at all.
How to avoid this trouble?
I've run into this a lot, especially with Firefox. I'm not sure its necessarily valid but i read somewhere recently that adding autocomplete="off" to your form tag will prevent any form element value caching.
There is a post here that provides a JavaScript solution that looks like this:
setTimeout(
function(){
document.getElementById( "form" ).reset();
},
5
);
EDIT
As your radio's arent in a form this should work:
<input type="radio" name="foo" value="bar" autocomplete="off">Bar
<input type="radio" name="foo" value="baz" autocomplete="off">Baz
You could propably unselect everything using javascript when the beforeunload event fires.