I am creating a radio button with the checked property but it's not showing selected
<mat-radio-group name="radioOpt1" [(ngModel)]="selectedRadio" [ngModelOptions]="{standalone: true}" (change)="radioChange($event)">
<mat-radio-button value="own" checked name="own">Own</mat-radio-button>
<mat-radio-button value="competitor" name="own">competitor</mat-radio-button> </mat-radio-group>
I want the first radio button to be checked by default
If using ngModel then you need to pass value of radio-button to ngModel.
<mat-radio-group name="radioOpt1" [(ngModel)]="selectedRadio"
[ngModelOptions]="{standalone: true}" (change)="radioChange($event)">
<mat-radio-button value="own" name="own">Own</mat-radio-button>
<mat-radio-button value="competitor" name="own">competitor</mat-radio-button>
</mat-radio-group>
and ts file
selectedRadio = 'own'; //default value
radioChange(e){
console.log(this.selectedRadio)
}
or dynamically populated
<mat-radio-group name="radioOpt1" [(ngModel)]="selectedRadio"
[ngModelOptions]="{standalone: true}" (change)="radioChange($event)">
<mat-radio-button *ngFor="let but of list" [value]="but.id" name="own" >
{{but.name}}
</mat-radio-button>
</mat-radio-group>
ts file
list = [{ "name": "own", id: "own"},{ "name": "competitor", id: "competitor"}];
selectedRadio =this.list[0].id;
[ngModelOptions]="{standalone: true}" should be needed for radio-group and [checked] attribute should be added in each radio button. Otherwise default selection won't be working.
Related
I'm new in angular material design and I have a problem with mat-autocomplete for dynamic inputs. By default user see one input but when some value is selected than another input can be added and this is the tricky part - how to make that all those inputs will be using only one mat-autocomplete? Is it possible?
Below is code where I'm using mat-autocomplete. The addItem() function is adding another input which would be bind to the same mat-autocomplete. Should it be moved above ? And what about unique id? How can I solve this issue with multiple inputs connected to the same mat-autocomplete?
<div formArrayName="items" class="form-group"
*ngFor="let item of items.controls; let i = index">
<mat-form-field class="example-full-width">
<input required type="text" placeholder="Item ID"
matInput
[formControlName]="i"
[id]="i"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async"
[value]="option.code"
(click)="selectOption(option, i)">
{{option.code}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<i *ngIf="i == 0 && selected" class="fa fa-plus add-vessel"
aria-hidden="true"
(click)="addItem()"></i>
<i *ngIf="i !== 0 && canRemove" class="fa fa-minus add-vessel"
aria-hidden="true"
(click)="removeItem(i)"></i>
</div>
You have to use multiple auto complete elements and all the inputs need to bind with array of valueChanges event capturing functions. The reason is if you're trying to bind valueChanges with formArray ("items") then the function will execute number of time that how many inputs in the array. Use the following code to achieve target.
for(var i = 0;i<numberOfInputElements;i++){
const items = this.form.get('items') as FormArray;
this.filteredOptions[index] = items.at(index).get('item').valueChanges
.pipe(
startWith(''),
map((value: string) => (value) ? this._filter(value, this.options) : this.options.slice())
);
}
I am trying to select a default option in select. Below is my code
<select [id]="index" class="form-control" (change)="onChange($event.target.selectedIndex,$event.target.value)" (focus)="onFocus($event.target.selectedIndex)">
<option value="" [selected]="true" disabled="true">{{'rec.select' | translate}}</option>
<option *ngFor="let attributeType of attributeTypeValues" [disabled]="attributeType.disabled" [value]="attributeType.attrTypeNm"
[selected]="attributeType.attrTypeNm===attributeEditForm.controls['attrType'].value">
{{attributeType.attrTypeDesc}}
</option>
</select>
I can see ng-reflect-selected as true. Yet nothing gets selected in UI.
The code works fine on first time load. But as the selection changes the changes are not reflected in UI. For example, if the form value is changed, then the selection condition changes and the same selected option does not get reflected in ui.
I personally would use a [(ngModel)] approach in this situation:
<select [(ngModel)]="selectedValue">
<option *ngFor="let v of values" [ngValue]="v">{{v.name}}</option>
</select>
with the following in the controller:
values = [
{ id: 0, name: "Value0" },
{ id: 1, name: "Value1" },
{ id: 2, name: "Value2" },
{ id: 3, name: "Value3" },
];
selectedValue = this.values[0];
important is that the default selection needs to be the correct object instance than the one used in the value list. Another object instance even with the same properties and values won't do => object identity is checked.
The easy way and fastest way would be to check if your *ngFor fresh new variable is equal to your logic in the [selected] : (example)
<select (change)="size($event.target.value)" class="size-option" name="size">
<option *ngFor="let number of [14, 16, 18, 20, 22]" value="{{number}}" [selected]="number == 16">{{number}}</option>
</select>
I have a page with a set of radio buttons that is dynamically created by knockout based on the selection of a drop down on the page. This is all working fine but the problem I have is that the "checked" binding on the radio buttons does not seem to be cleared if the radio button is removed due to a change of the drop down. This leaves me with a ViewModel with a value for "checked" when in fact nothing on the view is checked (or at least nothing that can be seen).
What I would expect to happen is that once the radio button is removed the checked binding would go back to being null but I can only assume the binding does not get updated if the radio button is removed from the DOM.
You can see this happening on jsfiddle - basically if you select a radio button and then change the drop down the selected value will still refer to the now removed (and therefore unchecked) radio button.
HTML:
<ul data-bind='foreach: availableChildren'>
<li>
<label>
<input type="radio" name="children" data-bind="checked: $root.selectedChild, value: id" /><span data-bind="text: name"></span>
</label>
</li>
ViewModel:
var ViewModel = function (settings) {
var availableParents = ko.observableArray(settings.parents),
selectedParent = ko.observable(),
availableChildren = ko.computed(function () {
if (!selectedParent()) {
return null;
}
return selectedParent().children;
}),
selectedChild = ko.observable();
return {
availableParents: availableParents,
selectedParent: selectedParent,
availableChildren: availableChildren,
selectedChild: selectedChild,
};
};
Is there anyway to get this to work as I would expect or is this just something that has been missed from Knockout?
I added this snippet to your viewmodel to get the behaviour you wanted:
// create internal computed
ko.computed(function() {
// add dependency to selectedParent
var s = selectedParent();
// reset selectedChild
selectedChild('');
});
Your updated fiddle: http://jsfiddle.net/danne567/avbU7/2/
I've just met with a problem on how to use radio buttons. So this is my codes:
In GSP
<g:each in="${Query1}">
<label for="account_expired">Account Expired:</label><br />
<input type="radio" name="acc_expired" value="${it.acc_exp}" checked="checked"> True
<input type="radio" name="acc_expired" value="${it.acc_exp}"> False
<br />
</g:each>
In my controller:
if(params.username != null )
{
String updateQuery = "UPDATE sec_user SET account_locked='"+params.account_locked+"' WHERE Username='"+params.username+"'"
String queryname = "select * from sec_user where username = '"+params.username+"'"
def Query1 = sql.rows(queryname)
def update = sql.executeUpdate(updateQuery)
[update:update, Query1:Query1]
}
So, what I'm trying to do is how does the radio button check which values goes to which 'checked' radio button. Because I'm doing an edit page, so the controller will retrieve information from the database and auto select the radio button, whether is it 'True' or 'False'. In this case it's either '1' or '0'. So is there anyone out there can help me with this?
Thank you guys so much.
To have your view correctly check the radio you want, you need to add an expression to your tag. Also I suspect you don't want each button to have the same value. I'm guessing one should be true and the other false.
<input type="radio" name="acc_expired" value="${true}" ${it.acc_exp == true ? 'checked="checked"' : ''}> True
<input type="radio" name="acc_expired" value="${false}" ${it.acc_exp == false ? 'checked="checked"' : ''}> False
PS. You may want to look up SQL Injection.
will you explain it specifically ,However This may help you http://grails.org/doc/latest/ref/Tags/radioGroup.html
boolean[] acc_expired= [] //in your controller
and iterate this array to get their checked or unchecked index.
How I can create a drop down list using select_tag "xyz", options_for_select or any way where on selecting any option from down list and hitting button will redirect me.
Any help??
<td>
<%= select_tag "options", options_for_select(
[["Dashboard",
"/homes/"+registrar.enrollment_application.id.to_s
]] ) %>
</td>
<input type="button" value="Select" onclick = "check_options()" >
if above code is right then all i need to write a javascript?? please let me now
function = check_options() {
If you can use javascript or even jquery on the client side you could set the window.location based on the selected item in the drop down, after you click the button:
HTML: This is how you set up your select list and a button
<select id="options">
<option value="http://stackoverflow.com">Stack Overflow</option>
<option value="http://google.com/">Google</option>
</select>
<input type="button" id="optionsbutton" value="Go" />
JavaScript: This is how you wire up the button click to the window redirect
var onButtonClick = function() {
window.location.replace($("#options").val()) //<--- This gets the selected value
// and redirects the window
}
$(document).ready(function(){
$("#optionsbutton").click(onButtonClick); //<--- This hooks up the button click
// to do the onButtonClick function
});
See How to redirect to another webpage in JavaScript/jQuery? for more details.
Update Using Provided Code
You'd just have to make your check_options function find the selected value and set the window location:
var check_options = function() {
window.location.replace($(" [ use selector for select element ] ").val());
});
You should add javascript like this
function check_options() {
window.location = document.getElementById("options").value
}