I'm using angular5 ng-select component:
https://github.com/ng-select/ng-select
and try to set the selected value (programatically) when the container component first loaded (kind of default selected value set in the model).
I didn't find any relevant attribute for it or for the isSelected for each item.
Here is my code (filtered):
HTML:
<ng-select [items]="filter.values" bindLabel="text" bindValue="id" class="input-md" [(ngModel)]="filter.selectedValue"></ng-select>
Model:
export class FilterData
{
Name : string;
FormattedName : string;
values : Filter[];
selectedValue : Filter = null;
constructor(filterData : FilterData)
{
this.Name = filterData.Name;
this.values = filterData.values;
this.selectedValue = typeof filterData.selectedValue == "undefined" ? null : filterData.selectedValue;
}
}
export class Filter
{
public id: number;
public text: string;
}
Just find the item
let item = this.ngSelect.itemsList.findByLabel('label of the item');
and then set it back
this.ngSelect.select(item);
you need a reference to ng-select in your angular component
#ViewChild(NgSelectComponent)
ngSelect: NgSelectComponent;
Related
I have a component called Dropdown.
I trigger specific instances with a click event:
<button #click.stop="$refs.notificationsDropdown.toggleDropdown()"></button>
triggers
<dropdown ref="notificationsDropdown"></dropdown>
the toggleDropdown function simply changes a boolean value in the data which shows a div if true.
Before this value is set to true, I'd like to get all instances of Dropdown and set this value to false so that all other dropdowns close before the new one opens.
How can I get all instances of Dropdown and run a function on each of them to close their dropdown?
It looks like Vuex state can help. You can change boolean value in data to compute value.
In dropdown:
computed: {
isShowed: function() {
return this.$store.state.activeDropdown === this;
}
},
methods: {
toggleDropdown: function() {
if (this.$store.state.activeDropdown === this) {
this.$store.state.activeDropdown = null;
} else {
this.$store.state.activeDropdown = this;
}
}
}
I am passing data from parent to child. In the HTML, i can see the value of the Input() variable. However, on my TS file, when I try to do a conditional to check the value of Input() it is always an empty string. Here is my code for the child:
#Input() checkDbStatus = '';
ngOnInit() {
this.initForm();
this.dbStatusCheck();
}
// disables all controls in a form group
disableControl(group: FormGroup){
Object.keys(group.controls).forEach((key: string) => {
const abstractControl = group.get(key);
abstractControl.disable();
})
}
// disable form controls if dbStatus !== update
dbStatusCheck() {
if(this.checkDbStatus !== 'update') {
this.disableControl(this.demographicsSectionOne);
this.disableControl(this.demographicsSectionTwo);
this.disableControl(this.demographicsSectionThree);
this.disableControl(this.demographicsSectionFour);
this.disableControl(this.demographicsSectionFive);
}
}
I think you need to use the ngChange lifecycle.
https://angular.io/api/core/OnChanges
export class YourComponent implements OnChanges
ngOnChanges(changes: SimpleChanges) {
if (changes.checkDbStatus.currentValue !== changes.checkDbStatus.previousValue) {
this.doStatusCheck();
}
}
Try set and get input() function
https://angular.io/guide/component-interaction
_checkDbStatus: any;
#Input() set checkDbStatus(data: any) {
this._checkDbStatus = data;
this.dbStatusCheck(data)
}
get checkDbStatus(){return this._checkDbStatus }
I am using Vuejs and have, inside a form, a textarea field.
When editing i can not see the value, inside the textarea.
If i save i do not lose the previous information as expected.
If i edit it stores the data as expected.
I only can not find, how to present the textarea value, when editing.
Inside a v-for loop i have the textarea that extendes a parent textarea template :
<row v-for="(field, index) in fields" :key="index">
<div v-if="field.formType === 'textarea'">
<va-textarea
:id="field.index"
v-model='formInput[index]'
v-bind:value="formValue[index]"
></va-textarea>
The field is defined in the data property :
data () {
return {
fields: {
Commentts: {
label : 'Commentts',
sortable : false,
type : 'textarea',
formType : 'textarea',
formReadOnly : false
}
And i have the formSave method to insert or edit:
methods: {
formSave() {
if ( this.formValue.Id === undefined) {
this.formInput.Motivo_Id = this.formInput.Motivo.id
}
this.saveButton = true;
this.formLoading= true;
this.axios.post('Courses/save',
{
"data": { Id : this.formValue.Id,
Date : this.saveDateTime(this.formInput.Date),
faculty_Id: this.formInput.faculty_Id,
Commentts: this.formInput.Commentts
},
"route" : this.$route.name,
}).then((response) => {
How can i show the textarea information when editing the form ?
Looks strange but let's figure out.
Loop
<row v-for="(field, index) in fields" :key="index">
By your example fields is the object and variable index contains value "Commentts" and not an index. Is it what you want?
Data propagation
<va-textarea
:id="field.index"
v-model='formInput[index]'
v-bind:value="formValue[index]"
></va-textarea>
I know nothing about va-textarea component implementation but I hope parameters v-model and :value were configured properly.
And with current implementation component's data field must contain and:
data () {
return {
fields: {
Commentts: {
.....
},
formInput: {
Commentts: ...some data...
},
formValue: {
Commentts: ...some data...
},
Because declaration `v-model='formInput[index]'` requires `formInput` field in the root of the data field with `Commentts` inside.
I am using Vue and suddenly some of the computed css using vuetify is not working.
The way I declare an object is
personal_info : {}
and in my template, I could just do personal_info.name and other more in every v-model of text input.
I have no errors but suddenly the vuetify has a class called input-group--dirty that will elevate the label of the text input whenever it's not empty. But suddenly, it's not working. It looks like this:
As you can see, the text and label are overlapping.
The only thing that make it work is to set the property to null which is:
personal_info : {
name: null
}
The problem is that I have hundreds of text inputs and I dont want to set everything to null.
Is there a simple way to set all of the object's properties to null instead of coding it 1 by 1?
checkout this snippet
var personal_info = {
name: 'john',
email: 'john#moto.com',
phone: 9876543210
}
console.log(JSON.stringify(personal_info)); //before looping
for (var key in personal_info ) {
personal_info[key] = null;
}
console.log(JSON.stringify(personal_info));//after looping and setting value to 'null'
Vilas example is ok. But in case you have nested properties and your obj looks like this you could try my snippet
var obj = {
a: 1 ,
b: 2,
c: {
e:3,
b: {
d:6,
e: ['23']
}
}
};
var setProps = function(flat, newVal){
for(var i in flat){
if((typeof flat[i] === "object") && !(flat[i] instanceof Array)){
setProps(flat[i], newVal);
return;
} else {
flat[i] = newVal;
}
}
}
setProps(obj, null);
console.log(JSON.stringify(obj));
you can use simple immutable oneliner:
Object.fromEntries(Object.entries(YOUR_OBJECT).map(([key]) => [key, null])))
const bio = {
name: 'john',
age: 22,
hobbies: ['soccer']
}
const resetBio = Object.fromEntries(Object.entries(bio).map(([key]) => [key, null]))
console.log(bio)
console.log(resetBio)
Im trying to use the example from sencha and configure rowexpander. When the grid renders the expander is already opened for each row and with nothing inside. When i click on its icon the following error is generated:
Uncaught TypeError: Cannot call method 'addCls' of null
Have anyone else faced this issue ? Can someone post an example of hpw to use rowexpander please.
plugins : [{
ptype : 'rowexpander',
rowBodyTpl : ['<div id="NestedGridRow-{rowId}"></div>'],
pluginId : 'rowexpanderplugin',
selectRowOnExpand : true,
// this gives each row a unique identifier based on record's "acct_no"
rowBodyTpl : ['<div id="NestedGrid-{name}" ></div>'],
// stick a grid into the rowexpander div whenever it is toggled open
toggleRow : function(rowIdx) {
var rowNode = this.view.getNode(rowIdx), row = Ext.get(rowNode), nextBd = Ext.get(row).down(this.rowBodyTrSelector), hiddenCls = this.rowBodyHiddenCls, record = this.view.getRecord(rowNode), grid = this.getCmp(), name= record.get('name'), targetId = 'NestedGrid-' + name;
if (row.hasCls(this.rowCollapsedCls)) {
row.removeCls(this.rowCollapsedCls);
this.recordsExpanded[record.internalId] = true;
this.view.fireEvent('expandbody', rowNode, record, nextBd.dom);
if (rowNode.grid) {
nextBd.removeCls(hiddenCls);
rowNode.grid.doComponentLayout();
rowNode.grid.view.refresh();
} else {
// this is the store for the inner grid
Ext.create('innsergridstore', {
autoLoad : {
callback : function() {
// create the inner grid and render it to the row
nextBd.removeCls(hiddenCls);
var grid = Ext.create('NestedGrid', {// <-- this is my "inner" grid view
renderTo : targetId,
store : this,
row : row
});
rowNode.grid = grid;
grid.suspendEvents();
}
}
});
}
} else {
row.addCls(this.rowCollapsedCls);
nextBd.addCls(this.rowBodyHiddenCls);
this.recordsExpanded[record.internalId] = false;
this.view.fireEvent('collapsebody', rowNode, record, nextBd.dom);
}
}
}]