I used reactive form in angular and put radio-button to my HTML code.
First I put code like below and used 'default' key word to on check box select default. But I second load same form default check not visible. In type script form ,I will patch value 'true' to form controller as default.
<mat-radio-button value="true" id="1" [checked]="true" />
<mat-radio-button value="false" id="2" />
After I changed it like below.
<mat-radio-button [value]="true" id="1" />
<mat-radio-button [value]="false" id="2" />
now it worked as expected. Need some expert help to , what happen this different way in internally ?
Brackets tells Angular that input bound property is an expression and needs to be evaluated. Eg this:
<mat-radio-button [prop]="prop" />
Will try to access a prop variable on its scope and get its value, while
<mat-radio-button prop="prop" />
will simply add prop attribute to the element with a string value assigned
value="true" bind the string 'true' instead of a boolean value.
[value]="true" bind to the boolean true. With bracket [], Angular bind to a literal (boolean, string, number, etc.) or to anything from your component that is public or to template variable.
value="true" is the same as [value]="'true'".
Related
<form [formGroup]="objForm" (ngSubmit)="submit()">
<label formArrayName="orders" *ngFor="let order of getOrdersArray.controls; let i = index">
<input type="checkbox" [formControlName]="i">
{{ordersData[i].name}}
</label>
<button>submit</button>
</form>
This code works.
I want to understand since formGroup and formControlName are wrapped in [] (rectangular brackets), why is formArrayName not wrapped in []?
I didn't find any explanation in this page: https://angular.io/guide/reactive-forms
Please explain the reasoning behind that syntax.
Rectangular brackets in Angular are a type of "Binding Syntax". The attributes formGroup and formControlName are wrapped in brackets because they are binding to an expression that will be evaluated. In your example, formGroup is receiving the value of your objForm formGroup Object. fomrControlName will receive the value of the order currently pointed to by your index i in the *ngFor statement.
formArrayName is not being passed a variable expression that needs evaluation, instead you are providing it with a static value of "orders". Thus, the rectangular brackets are not necessary as no value binding is taking place.
For more information on Angular binding syntax, see Angular Binding Syntax.
Also another helpful post on this same topic
How can I apply the stored true or false value to the checked attribute?
I have a series of question where a user can toggle on/off (true/false) as an answer. I have created an object called questions in Meteor.user().profile. The field names are the questions, and the values stored are either true or false.
Now I would like the attribute for each field to display the value stored instead of resetting to its default value.
<template name="template">
{{#with currentUser.profile.questions}}
<div class="row">
<input data-name="profile.questions.school" type="checkbox" name="questions" checked="{{school}}"> Go to School?
</div>
<div class="row">
<input data-name="profile.questions.contributor" type="checkbox" name="questions" checked={{contributor}}"> contributor?
</div>
{{/with}}
</template>
Am I doing this the long winded way? Would using the spacebars {{isChecked}} method aid in anyway? https://www.discovermeteor.com/blog/spacebars-secrets-exploring-meteor-new-templating-engine/
It seems as it is simply for displaying the check box.
The way I handle checkboxes/radios is like this:
Template.myTemplate.helpers({
isMyCheckboxChecked: function(value) {
return (value == true ? 'checked' : '');
}
});
Then in my template I can do:
<input name="myCheckbox" type="checkbox" value="true" {{isMyCheckboxChecked myCheckboxValue}} />
This assumes you are passing in a value to determine if the checkbox needs to be checked. If your values are pretty much true/false across the board, I would even consider making the helper "global" using Template.registerHelper. The code would pretty much be the same, you would just define the helper slightly different. This would make it available in all templates.
I am createing page using JSF 2.0:
<h:selectBooleanCheckbox id="checkbox1" title="Published"
onclick="#{StageGate.setMyCheckboxValue()}" />
I was expecting setMyCheckboxValue() to be called whenever checkbox is clicked. However, setMyCheckboxValue() is called once when page is loaded.
If I write
<h:selectBooleanCheckbox id="checkbox1" title="Published"
onclick="#{StageGate.setMyCheckboxValue()}; alert(document.getElementById('checkbox1').checked);" />
I get alert for each click.
My Question is: When I am getting alert, why setMyCheckboxValue() is not getting called on each onclick event?
Note: I also tried AJAX, but the checkbox remains constant.
The onclick attribute is for client side (javascript) methods and will not change anything on the server side.
If you want to change a server side value you need the value attribute:
<h:selectBooleanCheckbox value="#{StageGate.myCheckboxValue}" .../>
Note that I changed your setMyCheckboxValue() to myCheckboxValue because the setter method is automatically detected by jsf (if you correctly define your variable foo with the getter getFoo() and the setter setFoo(...))
onclick is used for client side javascript calls.
I think you want to call a function on server side, when a checkbox is clicked.
Here is the code:
<h:selectBooleanCheckbox id="checkbox1" title="Published"
value="#{StageGate.myCheckBox}" >
<f:ajax event="change" execute="#this"
action="#{StageGate.setMyCheckboxValue()}" />
</h:selectBooleanCheckbox>
I hope this will work for you.
I want to know is there any way to add a custom attribute to the a
HTML element.
For example ,
<input type="text" name="txtNAME1" displayName="dname1" />
In the above example the custom attribute "displayName" is not a
standard HTML attribute. So I want to know if I can define the same and push the intended value to the server and access the same attribute's value.
Thanks in advance!
Which language are you using? You can do this in C# using
<input type="text" name="txtNAME1" displayName="dname1" runat="server" id="test" />
Then, in the code behind:
test.Attributes["displayName"];
You can also access it in jQuery with
$('test').attr('displayName')
and send it through to the server via a handler.
I am using jstl with dropdown lists.
When i click submit button i success the specification but values int dropdownlists are reinitialized.
So I want to submit form without loosing the values already selected in the form because I need to stay always at the same level in the form.To be more clear, user choose a value from ddl and click edit button to show other options and fill them at the same form without loosing what he has selected.
I have tried to deal like that...
<form action="myjsp.jsp" method="post">
<input type="Submit" value="Edit">
...but it doesn't work.
Thank you for your help.
You need to preset the inputs with the request parameter values. You can access parameter values in EL by ${param.name}. Basically:
<input type="text" name="foo" value="${param.foo}">
Note that this is XSS sensitive. You always need to sanitize the user inputs. You can use the JSTL functions taglib for this.
<input type="text" name="foo" value="${fn:escapeXml(param.foo)}">
In case of dropdowns rendered by HTML <select> element, it's a bit trickier. You need to set the selected attribute of the HTML <option> element in question. You can make use of the ternary operator in EL to print the selected attribute whenever the option value matches the request parameter value.
Basic example:
<select name="foo">
<c:forEach items="${options}" var="option">
<option ${param.foo == option ? 'selected' : ''}>${option}</option>
</c:forEach>
</select>