I have mat-radio-group that has more mat-radio-group within it. I have created a stackblitz here
https://stackblitz.com/edit/angular-mdgy7x?file=app/radio-overview-example.ts
In the example when the page loads, I want to show 'ledger' radio option selected along with value1 below it selected as default. If I update the radio button to 'available', I need to select the 'value 1' below 'available' radio.
The code works fine for all cases, except the first case wherein I have to show default selection.
Can some one point out where I am going wrong?
For some reason, nested radio groups / buttons need a second update cycle in order to correctly update the default state. One way to achieve this, is to add a 0ms timeout in one of the lifecycle hooks before calling onRadioFilterChanged() with the default value. The earliest hook I found this to work in is ngOnInit(). You'll also need to set all checked properties to false so that a state change can actually happen, triggering the update.
So, adding
ngOnInit() {
setTimeout(_=> this.onRadioFilterChanged('L'), 0);
}
and setting checked: false also on the first checkboxes in each group will do the trick, as demonstrated in this updated stackblitz:
https://stackblitz.com/edit/angular-mdgy7x-dcijkt?file=app%2Fradio-overview-example.ts
Despite the 0ms timeout, you'll notice a slight delay on page load, but other than that and the kind-of-hack-ish feel to it, it works - and I haven't been able to get it to work in any other way so far.
First, add the call to ngOnInit:
ngOnInit(){
this.onRadioFilterChanged("L");
}
and create a variable to keep the value of ledger and available like for radios.
Then use that value in onRadioFilterChanged.
Another thing that is not working is when you select one of the sub-radiobuttons.
I achieved what I want using the following code. What I basically did is created separate radio buttons for parent and child and each of them has an ngModel associated with it. I then manipulate ngModel based on user interaction.
Following is the stackblitz,
https://stackblitz.com/edit/angular-mdgy7x?file=app/radio-overview-example.ts
Related
I have an edit page where several fields are conditionally disabled, based on the user's role. When the fields are disabled, their values are not posted to the server (as expected), which causes the ModelState to be invalid, as the values are required.
To get around this, I want to add Html.HiddenFor() for the fields; so that a value will still get posted (and so that it will retain those values if the View is returned). However, in the case that those fields are not disabled, I will then have both a TextBoxFor and a HiddenFor going to the same model property.
I have run a couple tests, and it appears that when this happens, the value of the first element on the form will be binded to the model, while the next one just gets ignored. If this is the case, then I should be able to just put the HiddenFor after the TextBoxFor, in which case the value of the hidden input will only be posted when the regular input is disabled.
#Html.TextBoxFor(m => m.FirstName)
#Html.HiddenFor(m => m.FirstName) #*Only gets binded to the model if the above text box is disabled*#
(There is some JavaScript that conditionally disabled the visible TextBox).
So two questions: 1) Is it documented that MVC binding will always work this way; can I safely have both of these fields?
And, 2) Is there a better approach to accomplishing this? I know that I can but the HiddenFor inside an #If statement so that it will only get created if the TextBox is disabled; but that is a lot of extra logic in the View that I'd like to avoid.
The DefaultModelBinder reads the values from the request in order and binds the first matching name/value pair and ignores subsequent matches (unless the property is IEnumerable). This is how the CheckBoxFor() method ensures a true or false value is always submitted to the controller (the method generates a checkbox with value="True" and a hidden input with value="False"), so you can safely add the hidden input after the textbox.
One option you might consider rather than a disabled textbox, is to make it readonly, which means it will always submit a value, therefore you only need one input (and you can always style it to look disabled if that is what you want).
Is there a way to set a menuItem which's order is not the first to be first view ?
jus like Youtube, they using MenubarTemplate and the first menuItem is search, but always shows the second one in first run.
I can setSelectedItem in code, but you still see the focus was on first one in a very short time, so can I set a default page which is not first of menuItem in TVML ?
Use attribute autoHighlight="true" (https://developer.apple.com/library/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/TVJSAttributes.html#//apple_ref/doc/uid/TP40015064-CH42-SW1). It's working in several templates, one of them being the Menu/Navigationbar - but some others seem to be buggy.
I am using the djFilteringSelect control to show values in a dropdown as user type a value.
The lookup and typehead is working fine. The user type a letter and the dropdown allow the user to select a value which is then displayed in the dropdown field.
If the user now decide to remove the value first selected so that the combobox is empty and leave the field, then the first value in the list is now automatically filled in.
The consequence of this is that if the user have added a value there is no way to remove the value and leave the box emtpy.
I am using required=false for both the control and the dojo attribute but it does not seem to help. There are also a few other djFilteringSelect attributes I have tried like "Autocomplete" and "trim" but it does not work
Here is the code
<xe:djFilteringSelect id="test" type="select" store="jsondata" searchAttr="data" required="false" labelType="html" invalidMessage="Not valid">
<xe:this.dojoAttributes>
<xp:dojoAttribute name="required" value="false"></xp:dojoAttribute>
</xe:this.dojoAttributes>
</xe:djFilteringSelect>
Initally the field is not required, but if the user have entered a value it is required.
My question is if there a way to prevent the djFilteringSelect control to always populate the field if I have previously added a value
I found someone who solved this in another stack overflow topic, by creating an empty entry in my data store. but I could not get this to work
Dojo: Select of empty value for FilteringSelect while required=false
I do this quite a lot. Right now I don't have a working sample to show you (since I moved to bootstrap - and have to code the selects by manually adding select2 controls) but something like this should do it...
I add an "empty" value at the top of my select - and that seems to work no matter whether I am using a combobox, djCombobox or combobox with select2 from bootstrap. My markup typically looks like:
<xp:comboBox id="inputLocationSelector" value="#{User.catchListType}" disableClientSideValidation="true">
<xp:selectItem itemLabel="(none)" itemValue=""></xp:selectItem>
<xp:selectItems>
<xp:this.value><![CDATA[${Configuration.meta.listLocationTypeOptions}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
Then you could specify "(none)", "All" or " " for the "not-selected" value depending on your needs.
Validation is a different thing so just specifying "required=false" does not give you the "empty" value.
/John
I have a simple HTML page with an Unordered list. Is it possible to have an input field where you could add more to the list and it would be saved after you submitted it. What I would like to add would be the content inside of an <li> tag as well as the <li> tags themselves.
Thanks,
Here is a jsfiddle with a demo of what I think you want to achieve: http://jsfiddle.net/mvJNq/25/
Note that I can not answer as to how you should do this on the server, as that depends on how your serverside code, database etc is set up. However, if all you want is to display it as HTML and not have it saved as the user navigates away, you won't need the Submit button at all - then you just need the "Add" functionality.
Yes, it is possible - no, it will not be pretty. Here is what you would do:
create your base form with any default list items/inputs
use jQuery/JavaScript to bind an event handler to a button that you click when you want to add another item (alternatively, you could skip this step and just have another item appear by default)
on your event (be it checking that all input boxes have user-entered text, or the click event in step two) add another list item using jQuery.append(...)
ensure that you have a hidden input field to be used as a "counter" to keep track of the total number of list items and increment the value of this counter each time you add a new list item (note: you may need to use the ParseInt() method, depending on how you design the code for this field)
the page that is receiving the form's inputs should first read the hidden field so that it knows how many items to add, and then you should loop through the items (for or while loop) to add them correctly
Note: I don't know what Server-Side language you are using to handle receiving the form so step 5 is a fairly generic and universally viable option
Sure, it's possible.
The complexity of this comes in when you want to "save" the items. If the user leaves the page and comes back later will that data be available? If so, you will need a database like mySQL or similar. The li tags can be stored as well, but why?
If you just need that information available in that session you can store in a JavaScript variable and have it loop through the variable and spit them out as <li>'s
If you did want to use an add button instead of submit:
$('#addButton').click(function(){
var savedContent = $('#input').val();
}
To create + insert the <li>you can use javascript to create the element and append it to the ul. If you have more than one ul change the index:
var content = document.createElement('li');
content.innerText = savedContent;
document.getElementsByTagName('ul')[0].appendChild(content);
i using js to add multiple row in a particular table, but when submit the form all check box having the same value, so how can i validate this checkbox using js before submit so change value to if unchecked, i trying on that but got no solution, does any one this before,
thanks in advance
What are your checkboxes called? Do they all have the same name? You have two options. One is giving each checkbox an unique name, the other is giving your checkbox a name like checkboxes[]. The [] lets all the values be entered into an array so they don't overwrite eachother.
If you mean something else, you have to state more clear what you want, because it's a bit incomprehensible right now.
finally i found solution for my problem, thanks 'vindia' for the clue, i add checkbox with array, sol as below
in html
`<input id="abc[]" name="abc[]" type="checkbox" value="1">`
in js
for(var i=0;i<chkDefaultLength;i++){
if(!document.neworupdateevent["chkDefault[]"][i].checked){
document.neworupdateevent["chkDefault[]"][i].value=0;
}
}