I have the following HTML which should generate a radio button with accompanying text for each element in regionList:
<div ng-repeat="region in regionList">
<input type="radio" name="syncType" ng-model="model.syncType" value="REGION_{{region.id}}" />
<span class="radio-text" ng-click="setSyncType('REGION_{{region.id}}');">Specified Region: {{region.region}} - {{region.projectCount}} Projects</span>
<br />
</div>
The {{region.id}} references appear to be correctly populated when I inspect within Chrome:
<div ng-repeat="region in regionList" class="ng-scope">
<input type="radio" name="syncType" ng-model="model.syncType" value="REGION_f29a6d22-3bf5-4aa5-a564-b19451548288" class="ng-pristine ng-untouched ng-valid">
<span class="radio-text ng-binding" ng-click="setSyncType('REGION_f29a6d22-3bf5-4aa5-a564-b19451548288');">Specified Region: Utah - 12 Projects</span>
<br>
</div>
And when I click the radio button, it works fine. When I click the accompanying text, setSyncType() receives the literal string "REGION_{{region.id}}". What am I doing wrong? Or possibly, what should I look for?
Worth mentioning: the regionList is populated asynchronously/as part of a Promise, and I still haven't completely wrapped my head around javascript promises. There are other buttons in the radio group that are not part of this regionList, and they display. Then the list refreshes including the regionList radio buttons.
Thanks to #isherwood for pointing me in the right direction. Using the appropriate tag, label, to decorate a radio button solved the problem:
<div ng-repeat="region in regionList">
<input type="radio" name="syncType" ng-model="model.syncType" id="REGION_{{region.id}}" value="REGION_{{region.id}}" />
<label for="REGION_{{region.id}}" class="radio-text">Specified Region: {{region.region}} - {{region.projectCount}} Projects</label>
</div>
Related
I've been learning about the "for" attribute in HTML and what it does but I've stumbled upon a weird example that I've yet to understand
Code1
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
Code2
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<br>
<label><input type="checkbox" name="personality"> Loving</label>
I understand why "for" is used in the first block of code but I don't understand why the second code used "for" and "id" implicitly when it could've just worked fine without them.
Any help?
It is correct, that it works without it. But it is useful to connect the label with the input field. That is also important for the accessibility (e.g. for blind people, the text is read).
The browsers also allow you to click the labels and automatically focus the input fields.
For checkboxes this can be useful as well. But for these, you could also surround the checkbox-input like this:
<label>
<input type="checkbox"> I agree with the answer above.
</label>
In this case, the checkbox is automatically checked when you click on the text.
The surrounding of the inputs with a label works with every input field. But the text, that describes the input field, should always be inside it. That what for is for: When your HTML disallows the label-surrounding, you can use the for-attribute.
The the both following examples:
Simple stuctured:
<label>
Your Name:<br>
<input type="text"/>
</label>
Complex structure around input fields:
<div class="row">
<div class="col">
<label for="name">Your Name:</label>
</div>
<div class="col">
<input type="text" id="name" />
</div>
</div>
It could be used without "for" attribute, and it will be fine, according to docs.
This is just one option how to use "for" to omit confusing developers.
Anyway, in case of placing checkbox inside label, you can skip "for" and it will be fine.
<!-- labelable form-relation still works -->
<label><input type="checkbox" name="personality"> Loving</label>
"for" approach much preferable if you want to style it, f.e. using Bootstrap
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
To be able to use the label with the check box.
E.g., when rendered, click the label and it will toggle the check box ticked state.
Edit: Further to this, it allows putting the label anywhere on the page.
I have a div which has a couple of clr radio buttons wrapped in a .I want to generate the radioButtons based on a boolean value. Following is the code.
<div class="clr-col-4">
<clr-radio-container>
<label class="display-label">Radio Div</label>
<clr-radio-wrapper *ngFor="let col of cols">
<input type="radio" clrRadio />
<label class="display-label" {{col.headerName}}</label>
</clr-radio-wrapper>
</clr-radio-container>
</div>
I have a variable named enableButton. If the enableButton is true, I want to show the radio button, else I don't want to. Could you please help me how to do this?
You can use the ngIf directive. It is an essential thing to have in mind when creating Angular templates.
<div class="clr-col-4">
<clr-radio-container *ngIf="enableButton">
<label class="display-label">Radio Div</label>
<clr-radio-wrapper *ngFor="let col of cols">
<input type="radio" clrRadio />
<label class="display-label" {{col.headerName}}</label>
</clr-radio-wrapper>
</clr-radio-container>
</div>
I suggest you read the docs to familiarise more with the directive and its other conditional variations like then, else, etc.
I am trying to build a basic colorpicker with predefined colors.
for that I have an object "colors" with color-values as it's properties:
public colors = [
{ value: '#ffffff' },
{ value: '#919191' },
{ value: '#555555' },
// and some more
];
Following some examples on the web, I set up a select-option structure in my html:
<select name="role" [(ngModel)]="item.color">
<option *ngFor="let color of colors" [value]="color.value">
<div class="color-box-modal" [style.background]="color.value"></div>
</option>
</select>
This does create a dropdown menu for the options, though the colors inside don't show up. The class color-box-modal has height and width values as I did not intend to have a dropdown, but several colored boxes to click on in order to select.
Is there an alternative to the select-option structure which allows me to not have a dropdown, but just several colored boxes? Radio-buttons/checkboxes are not the desirerable way either, as I want to have a clickable field on it's own that reacts to being clicked.
If there is no alternative, is it possible to do the ngModel binding on a button-click?
edit:
After testing option 2 on Osman Ceas answer, I now have this:
<ng-template #content let-c="close" let-d="dismiss">
<i class="close icon" (click)="d('Close click x')"></i>
<div class="header">
Choose a new color
</div>
<div class="content">
<label for="col1" class="color-box-modal" style="background-color: #ffffff">
<input (click)="c('#ffffff')" id="col1" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#ffffff'">
</label>
<label for="col2" class="color-box-modal" style="background-color: #ffff00">
<input (click)="c('#ffff00')" id="col2" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#ffff00'">
</label>
<label for="col3" class="color-box-modal" style="background-color: #00ffff">
<input (click)="c('#00ffff')" id="col3" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#00ffff'">
</label>
</div>
<div class="actions">
<div class="ui button" (click)="c('Close click cancel')">Cancel</div>
</div>
</ng-template>
Though the ngModel binding does not seem to work.
The whole thing opens in a modal (the template), which in itself works, just binding to the ngModel, as I said, does not.
A native HTML select will only render text inside and any other tag will be ignored, so that's why your boxes are not showing.
If your wrap your radio button or checkbox in a <label> with the attribute for equals to an ID given to the <input>, you can basically click anywhere on the label, lets say some adjacent text, and the click will propagate to the input so the binding will still work.
You can create your own custom form controls, check out this article. So you could create a custom color picker form element that will work in any form using template forms or reactive forms.
Have a nice day
Now, this might not help everyone, but it was my solution in the end.
I started with a loop, item of items where the template in my question was meant for one single item.
I solved, or rather worked around the binding situation by just moving each item to it's own component, somewhat like this:
<div *ngFor="let item of items>
<app-sub-item [item]="item"></app-sub-item>
</div>
inside I have severel of these:
<label for="col1" class="color-box-modal" style="background-color: #ffffff">
<input (click)="setColor('#ffffff')" id="col1" type="radio" class="hidden">
</label>
With the following being in the ts-file:
setColor(color: string) {
this.item.color = color;
}
This actually works just fine at the moment.
Hope whoever reads this issue can find some use in my solution.
I have two inputs of type radio. For each input there's a correspoding label with a single button inside.
I was expecting that clicking the button would have the same effect as clicking the label: that the corresponding input would be checked.
However, this does not happen. As shown by the following snippet, hovering and pressing the buttons does trigger the corresponding style changes in the radio buttons, but the click action does not select the input, even though the simple labels work as expected.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
I have also tried to add an event listener to both buttons' click events, and within them calling event.preventDefault(), just to make sure that the default behaviour of the button was not preventing the event from bubbling up to the label, but to no avail, the label is receiving the event.
Since this seems to be consistent across browsers (Tested on Firefox 41a and Opera 31b / Chrome 44):
What's happening here that I'm missing?
How can I implement this without trickery (such as styling the label as if it were a button)?
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<button type="button">One</button>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<button type="button">Two</button>
</label>
</div>
A label can only be associated with one form control at a time. This is evidenced by the fact that the for attribute points to an element with a matching ID attribute.
You have a button that is a descendant of your label; the expected interpretation of this is that the label serves as a label for the button. However, you're trying to associate the radio button, not the button element, with the label. The real problem here is that there is a conflict between the form controls and the label; it's unable to figure out which control it's supposed to be associated to.
I'm guessing that the fact the radio button isn't working correctly is a side effect of this. Perhaps it's down to some activation behavior in both the radio button and the button element.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
The validator does nevertheless produce the following error with your markup:
Error: Any button descendant of a label element with a for attribute must have an ID value that matches that for attribute.
This is because a label element with a for attribute needs to have a form control with that ID value for the for attribute to point to, even if that control is a descendant of the label itself. But you can't assign the same ID to more than one element. The result is the aforementioned conflict.
Without knowing what you're trying to accomplish here, the best advice I can give if you just want the label to have the appearance of a button is to just style it as such.
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<span style="color: red;">One</span>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<span style="color: blue;">Two</span>
</label>
</div>
I am trying to design a web form where I run into a strange issue.
I set 3 radio buttons, but I can select only the first one no matter what radio button I click. I tried to open the HTML page on different browsers other than Firefox and it was okay. I also tried another web form that has a radio buttons with Firefox and it was okay. I could not figure out what why Firefox cant select the other radio buttons in from my form HTML page.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>m</title></head><body>
<from method="post" action="self">
<label> <span>Gender :</span>
<br>
<input name="gender" value="1" type="radio">Male
<br>
<input name="gender" value="2" type="radio">Female
<br>
<input name="gender" value="3" type="radio">N/A
<br>
</label>
</from>
</body></html>
Don't use multiple inputs inside label. I think in this case it will select only the first input on matter where you click on label.
<form method="post" action="self"> <span>Gender :</span>
<br>
<input name="gender" value="1" type="radio"/>Male
<br>
<input name="gender" value="2" type="radio"/>Female
<br>
<input name="gender" value="3" type="radio"/>N/A
<br>
</form>
As #K K said, it's caused by multiple inputs inside a label tag.
We had a similar issue. I think what happens here is the event triggers at one of the <input>s, and then bubbles up to the parent <label>. Labels are bound to an input inside them, and I guess multiple inputs cause it to default to the first one. So it triggers an event on whatever one you click, then bubbles to the parent <label> and triggers again there, which is bound to the first input. Our case was with checkbox inputs, and it would set both boxes when the second one was checked. In Firefox. Not sure why Chrome behaves differently.
Example with checkboxes:
http://codepen.io/anon/pen/IjboB