Within a form, I can't get a preselected option to show up on a select.
If you look at material select example without the form elements, it works, but with form, while the model is correct and if I hit "submit" on my form it works, but I'd really like it to display the defaulted answer upon opening the form.
https://stackblitz.com/edit/angular-5367rp?file=app%2Fselect-hint-error-example.html
It should look like the example (Select with two-way binding) at: https://material.angular.io/components/select/examples where "Option 2" is clearly preselected.
When using forms, you usually don't bind to the 'value' property because the form control effectively replaces it. So to 'pre-select' a value, you set it on the form control:
animals: Animal[] = [
{name: 'Dog', sound: 'Woof!'},
{name: 'Cat', sound: 'Meow!'},
{name: 'Cow', sound: 'Moo!'},
{name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
];
// selected = "Dog"; // don't use this
animalControl = new FormControl(this.animals[0], [Validators.required]);
Related
On a zapier-cli application, how do I do to create the Add a search step button next to a dynamic field that will be used to fill the ID of the object about to be updated, like in the image shown below, described on Zapier's documentation here https://zapier.com/help/how-connect-findsearch-step-update-step/ ?
This is my InputField definition:
{
key: "contact_id",
type: "string",
label: 'Contact',
required: true,
helpText: "Pick the contact to update.",
dynamic: "contact.id.name",
altersDynamicFields: false
}
David here, from the Zapier Platform team.
Per the docs you need to add a search property that points to a search key and id property (like findContact.id). That plus dynamic will get you your search button.
here is the problem, I can create the custom option as specify on documentation like this:
var option = new Option("my custom option", "myid", true, true);
$('select[name="myselect"]').append(option).trigger('change');
// manually trigger the `select2:select` event
$('select[name="myselect"]').trigger({
type: 'select2:select',
params: {
data: {
id: "myid",
text: "my custom option",
customparam: {
hello: "I'm here"
}
}
}
});
So, this creates the option normally and shows on select2 as selected as expected, this also trigger the select2:select event and I can read the extra parameter when this event is trigger, but here comes the problem, I can NOT access the extra parameter by doing this:
$('select[name="myselect"]').select2('data')[0].customparam
it's like the custom parameter is not attached to the element and it was only pass to the events.
for all who try to find an solution to add the custom parameters back on remote select2, here is what I did and worked perfectly:
$('select[name="yourfieldname"]')
.append(new Option(`${doc.n}`, doc._id, true, true))
.select2('data')[0].customparam = doc.i;
then just when you need call:
$('select[name="yourfieldname"]').select2('data')[0].customparam
The method described by #rafaelrglima's works for me, but I prefer the method below, which was gleaned from dejan9393's answer in Github issue 2830:
var dataAdapter = $('select[name="myselect"]').data('select2').dataAdapter;
dataAdapter.addOptions(dataAdapter.convertToOptions([{
id: "myid",
text: "mycustomoption",
customparam: "hello"
}]));
I prefer this way because I don't have to have one step for adding "id" and "text" and separate step for adding custom parameters. Also convertToOptions takes an array, so you have a convenient way to add multiple options in one step.
I'm writing a TFS/VSTS extension widget which uses the VSTS Combo control (documented here) to display a hierarchical data source. For example: Tree of stored queries.
Populating the tree is quite straight forward, such as in the following simplified code. Note that each source item has a unique id property.
var source = [{ text: 'root',
id:1,
children: [ {text:'child 1', id:10},
{text:'child 2', id:20},
{text:'child 3', id:30}
]
}];
var treeOptions = {
type: TreeView.SearchComboTreeBehaviorName,
width: "350px",
sepChar: '>',
source: source,
change: function () {
console.log('selected: ' + this.getValue());
}
};
var combo = Controls.create(Combos.Combo, $(".combo-container"), treeOptions);
I have two questions regarding the combo:
1. When the combo selection changes, How do I get the selected item's id (not the text)?
2. Is there a way to allow only leaf selection?
You can't get the selected item's id directly, you can get the id per to the select text (JSON operation).
It isn't supported to just allow only leaf selection, you may do it with other 3rd control package.
I dont understand how the promptValue is stored.
I have the following function and I want to pass the promptValue to the callback function "this.rename". I dont know how to get this value. The example published by the react native people is doing some mysterious stuff to get this value. Can anyone explain?
renamePrompt: function(line) {
AlertIOS.prompt(
'Rename',
line.name,
this.rename
);
},
AlertIOS.prompt accepts a couple of parameters. Let's take a look at them:
AlertIOS.prompt(
'Title', 'Default Value',
[{text: 'Button One', onPress: this.firstButtonPress.bind(this)},
{text: 'Button Two', onPress: this.secondButtonPress.bind(this)}]
)
The first parameter that AlertIOS.prompt accepts is the title -- what gets displayed to the user. It's a required propType.
The next parameter is a value, which is what gets pre-filled into the text box for your user. This is an optional propType.
After that, the array you see maps to the buttons that your user gets to tap on. These buttons are represented as objects, with some key/value pairs. The first is text, which will display the button text. The second is onPress, which is a method that you specify to handle that specific button being pressed.
In order to retrieve the value of the button, you need to bind this (in this case, it's the prompt) to your onPress method. If you do this, you can have your onPress handler access the typed in value as such:
firstButtonPress(value) {
console.log(value)
}
This button array is conditionally optional. If you choose not to give a list of buttons, AlertIOS will expect you to pass in a callback function as a parameter for AlertIOS.prompt (but not both a set of buttons and a callback).
Does someone know if there is a way to create a OData Service that is bindable to an SAPUI5 TreeTable element?
According to the example from here:
https://sapui5.netweaver.ondemand.com/sdk/#test-resources/sap/ui/table/demokit/TreeTable.html
The recursive structure of the data is a list. For example:
//Define some sample data
var oData = {
root:{
name: "root",
description: "root description",
checked: false,
0: {
name: "item1",
description: "item1 description",
checked: true,
...
I expected to solve that problem with an navigation at the service side. Like
Element with attributes and one attribute points to a list of Elements.
But this would not be the same.
I also detected this thread, but the answer is one year old:
http://scn.sap.com/thread/3389546
All in all, is the answer still true? Or is there a solution, so that the data binding works?
You can use treebinding from ODataModel. First of all, prepare backend. You need to cycle navigation in your entity set. For example, you have entity set ItemCollection and you add navigation property ItemNavigation which refers to ItemCollection. After just bind tree to your TreeTable:
var oTreeTable = this.getView().byId("myTreeTable");
oTreeTable.bindRows({
path : '/ItemCollection',
properties : {
navigation : {
'ItemCollection' : 'ItemNagigation'
}
}
});
Should work fine but be aware to use it with Tree control. TreeTable loads navigation item by click on its parent and Tree loads the whole tree at once.