ref: this jsfiddle
The html is:
<script id='radio' type='text/ractive'>
<div>
<input type='radio' name='{{status}}' value='true' />
<input type='radio' name='{{status}}' value='false' />
{{status}}
</div>
</script>
<div id='container' />
and the javascript is:
Item = Ractive.extend({
template : '#radio'
})
new Ractive({
el : '#container',
template : "{{#items:i}}<item status='{{status}}' />{{/items}}",
components : { item : Item },
data:{items :[{status : 'false'},{status : 'true'}]}
})
So there are two items each with a pair of radio buttons to set status to true or false.
Problem is that the 'name' attribute is the same for both items (i.e. in all four radio buttons). So the radio buttons don't behave as two pairs (one per item) but they behave instead as a group of four.
How can this be written such that each item has its own pair of true/false radio buttons?
I found the answer in the Ractive github issues.
As noted in the issue comment, scoping can be achieved by wrapping the radio buttons inside a element. This will not work when adding the form element creates nested forms, but it will work in my case.
Related
I have 2 strange problems. I have a large form with lots of input fields. That works fine. I want to add a slide toggle at the bottom which changes a variable that will affect styles on the whole form.
My first problem is that the variable will not display until the slide toggle is clicked.
HTML
<mat-slide-toggle [(ngModel)]="ifPrint" name="ifPrint" id="ifPrint" ></mat-slide-toggle>
<div>
{{ifPrint}}
</div>
COMPONENT
export class PrintReviewDetailsComponent implements OnInit {
ifPrint = true;
}
the ifPrint variable is blank on page load
The second problem is
when the slide toggle is clicked the div containing the variable shows as true but when I click the toggle to the off position the ifPrint variable stays as true and does not change.
I have created a blitz and it is working fine there with the same code so I am unsure as why I am having these issues on my page.
The console says:
Error: No value accessor for form control with name: 'ifPrint'
EDIT: I updated the stackblitz to include the html of the form and now it is not working.
Your updated stackblitz couldn't recreate the issue which you shared... But from your question, the following 2 issues are addressed for a form and styling is also done:
the toggle value was not displayed by-default until the toggle was clicked
the toggle value didn't change when you toggled it
the style is now being updated based on the toggle value
relevant TS:
model:any;
constructor(){
this.model = {name: '' , age: null, ifPrint: false};
}
relevant HTML:
<form (ngSubmit)="formSubmit()" #demoForm="ngForm" >
<div [ngClass]="model.ifPrint === true ? 'trueClass' : 'falseClass'">
<input type="text" placeholder="Enter Name" #name="ngModel" [(ngModel)]="model.name" name="name" />
<br/>
<input type="number" placeholder="Enter Age" #age="ngModel" [(ngModel)]="model.age" name="age" /> <br/>
<mat-slide-toggle #ifPrint #age="ngModel" [(ngModel)]="model.ifPrint" name="ifPrint"></mat-slide-toggle> {{model.ifPrint}} <br/>
</div>
<button type="submit"> Submit </button>
</form>
check a minimal, working demo here for what you're trying... hope it helps...
I removed everything in your template except the mat-slide-toggle and it works as expected.
I believe the issue is because your html template is referencing methods or properties that your component does not have, or trying to access a property of null or undefined somewhere is causing the issue.
Check your console for the errors and if you fix those up, the slide toggle should work as expected.
I'm developing an Angular 6 app which uses ngx-translate for localization and I'm also using Bootstrap 4 tooltips and the problem I'm facing is I'm not being able use localization keeping Bootstrap tooltip style.
Without localization I would use an input this way:
<input type="text" class="form-control text-truncate" id="position"
placeholder="position" data-title="position" />
And this will show a very nice Bootstrap tooltip as it can be seen below:
With ngx-translate localization I would use an input this way:
<input type="text" data-toggle="tooltip" class="form-control tooltipped text-truncate" id="position"
[attr.placeholder]="'wfrh_vacancyform_position' | translate"
[attr.data-title]="'wfrh_vacancyform_position' | translate" />
and the problem here is data-title attribute. "data-title" attribute is used to display the tooltip but I guess ngx-translate doesn't recognize it (maybe?).
Placeholder is working fine this way (the text is translated and shown correctly) but tooltip won't show.
I've also tried this way:
<input type="text" data-toggle="tooltip" class="form-control tooltipped text-truncate" id="position"
placeholder="{{'wfrh_vacancyform_position' | translate}}"
data-title="{{'wfrh_vacancyform_position' | translate}}" />
which is also not working (it only works for placeholder) so I'm stuck.
If I do:
<input type="text" data-toggle="tooltip" class="form-control tooltipped text-truncate" id="position"
[attr.placeholder]="'wfrh_vacancyform_position' | translate"
[attr.title]="'wfrh_vacancyform_position' | translate" />
then the tooltip shows but with no style as it can be seen in the next image:
And this is the way I create the tooltips in code (in ngOnInit):
ngOnInit() {
setTooltip()
}
setTooltip() {
$('.tooltipped').tooltip({
placement: 'auto',
trigger: 'focus',
template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner bg-dark text-light"></div></div>'
});
$('.tooltipped').bind("mouseover", function () {
var _this = $(this);
_this.tooltip("show");
});
$('.tooltipped').bind("mouseout", function () {
var _this = $(this);
_this.tooltip("hide");
});
$('.tooltipped').bind("keyup", function () {
var _this = $(this);
_this.tooltip("hide");
});
}
Well I'm stuck. I need to be able to display this nice styled tooltip with translation. Any help / ideas?
Thanks.
Ok, after long time investigating I was able to find a solution and I'll post it here in case it helps anyone else.
The problem is I was setting tooltip in onInit (which is fired only once when the component is created) and wasn't setting any tooltip text, just leaving it to pickup the one set with:
[attr.data-title]="'text_to_translate_key' | translate"
(the initial text translation) and after changing language tooltip was not refreshing (the text was static with the initial value) but you can use a function with the tooltip "title" property this way:
$('.tooltipped').tooltip({
placement: 'auto',
trigger: 'focus',
template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner bg-dark text-light"></div></div>',
title: this.setTitle
});
setTitle() {
return $(this).attr("placeholder");
}
and this function (which has current object reference -this- as an implicit input parameter) acts as a binding which updates the title property continuosly so when placeholder text changes (placeholder does not need to be refreshed after language changes and that's why it works) the tooltip "title" property will be updated and as a consequence tooltip text will change and user will see updated text.
"The end" :)
Was a bit unsure how else to word this, JavaScript is the main thing I NEED to learn but after putting hours and hours in i still can't write javascript code off the top of my head. I understand the syntax of just about everything but when it comes to integrating it with css or html I am clueless!
Heres the code:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker">
<input type="submit" value="Submit">
</div>
JavaScript:
document.getElementById("mydiv").style.backgroundColor="colorpicker.Submit";
bare in mind i've had little experience with forms and inputs in html too.
Any reply would be much appriciated! Thanks!
The value for style.backgroundColor should be a string representing a color value used in CSS, which can be one of:
Color name such as red, green, pink, ...
Color hex code such as #ff0000 (or #f00), #00ff00, #ff00ff ...
rgb() or rgba() function such as rgb(255,0,0), rgb(0,255,0), ...
You also have to set up the click event handler for the button submit. Here are details:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker"/>
<input type="submit" value="Submit"/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[1].onclick = function(){
div.style.backgroundColor = div.children[0].value;
};
Note that you can assign an id for each input field to get access to it in JS code, in the above code I use the children collection to access to them instead. The first input field is the first child of div, the second input field is the second child of div.
Demo
Also note that, since HTML5 (which has been supported by all the major browsers) you can use the color input field which can popup a real color picker dialog for the user to select and then you just need to handle the event onchange to get the selected color (via the value property) like this:
HTML:
<div id="mydiv">
<input type="color" name='colorpicker'/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[0].onchange = function(){
div.style.backgroundColor = div.children[0].value;
};
Updated Demo.
Use the form tag onsubmit method to call your JavaScript function.
Hi I've a kendo grid with country and state details. And I've a toolbar with add button. When I click on add new button, I'm getting a popup with country and state dropdowns. Now I want to select country then state. But here I want to load states based on country selection. Here is my sample code. It is not working.
function loadStates(element) {
// here I want to update below model
StateModel.StatesByCountry
something like this.
StateModel.LoadStatesByCountry($(element).val(), function () {
});
}
<script id="popup_editor" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="Country">Country</label>
</div>
<input name="CntryName"
data-bind="value:CntryName"
data-value-field="Value"
data-text-field="Text"
data-source= CountryModel.AllCountries
data-role="dropdownlist"
onChange="loadStates(this)"
/>
<div class="k-edit-label">
<label for="State">State</label>
</div>
<input name="StateName"
data-bind="value:StateName"
data-value-field="StateID"
data-text-field="StateName"
data-source=StateModel.StatesByCountry
data-role="dropdownlist" />
</script>
Every time you have a country selected, you can filter the states available, so you don't have to care about it in the next popup.
See examples here http://docs.kendoui.com/api/framework/datasource#methods-filter
I am currently using the validate plugin to validate a form (using ASP.Net controls). I have stripped out the rules from the standard setup within the form.validate method ie:
$("form").validate({
rules: {
ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0: "required"
}
});
I now have these in various functions which add the ruless depending on what button is clicked. This works fine for text boxes, but for a RadiobuttonList when the plugin tries to add the rule there is an error saying the element is undefined.
function addRuleSet() {
$("#ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0").rules("add", { required: true });
}
I think the problem is that I am using the name attribute (asp puts $ in )to define the group that the radio buttons belong to rather than an id (, but in the static settings all the elements are definied using the name attribute. Anyway I am not sure how to get around adding a rule for a group of associated radio buttons, any advice would be appreciated.
PS I really need to call the RadioButtonList rather than the individual radio buttons.
You can also apply a rule by setting classes on the element. For example, if you give the class "required" to an input, then the required rule applies to that element. To do this, you'd use the CssClass property on the control. You may need to experiment with compound controls, like RadioButtonList, to make sure that the class is being applied to the input elements generated, not the container. If you have trouble with this, one way to do it would be to add the class using jQuery after the page loads based on a selector.
<asp:RadioButtonList id="RadList" runat="server" CssClass="required">
...
</asp:RadioButtonList>
or
<script type="text/javascript">
$(function() {
$(':radio').addClass('required');
$('form').validate();
});
</script>
For a complex, class-based rule you can add new rules using addClassRules.
<script type="text/javascript">
$(function() {
$.validator.addClassRules({
range0to10: {
range: [0, 10]
},
name: {
minlength: 2,
required: true
}
});
$('form').validate();
});
</script>
<form ... >
<input type="text" name="rating" id="rating" class="range0to10" />
<input type="text" name="firstName" id="firstName" class="name" />
<input type="text" name="lastName" id="lastName" class="name" />
</form>
After days of this driving me mad, asking the question got me thinking how to get the element returning properly, and I came across this method of referencing staright away which allows me to do it:
$("input:radio[name='ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0']").rules("add", { required: true });