I am currently trying to bind my SmartVariantManagementUi2 Control within my sap.ui.comp.filterbar.FilterBar to a Backend-Object: "/Variants>VariantName". Since I don't know how to access the variantmanagement control Within my Filterbar in the view-:
<filterbar:FilterBar id="_worklistFilterbar" persistencyKey="worklistView>/Variants" search="_onLoadFilters">
<filterbar:filterGroupItems>
...
</filterbar:filterGroupItems>
</filterbar:FilterBar >
i am now attempting to bind the VariantItems in the Controller like this:
let oControl = new sap.m.Title({text:"{VariantName}"});
this.byId("_worklistFilterbar")._oVariantManagement.oVariantText.bindAggregation("content", {
path: "/Variants",
template: oControl,
templateShareable: false
});
the binding results in following errors:
Assertion failed: multiple aggregates defined for aggregation with cardinality 0..1
Binding of single aggregation "content" of Element sap.m.Title#application-[appname]-display-component---worklist--_worklistFilterbar-variantUi2-text is not supported! -
Assertion failed: "Element sap.m.Title#__title0-application-[appname]-display-component---worklist--_worklistFilterbar-variantUi2-text-0" is not valid for aggregation "content" of Element sap.m.Title#application-MORe-display-component---worklist--_worklistFilterbar-variantUi2-text
adding element with duplicate id '__title0-application-[appname]-display-component---worklist--_worklistFilterbar-variantUi2-text-0' -
In the rendered app, I can see that the variantItems seem to be bound incorrectly:
If any of you could help me set a correct binding for my variantManagement(-items) within the filterbar or could offer a hint how to access the variantmanagement control in the filterbar-view, it would help me out a lot!
Thx in advance.
Related
TypeError: cannot set properties of null (setting 'innerHtml')
I have created a simple angular service that initializes the inner html of a div tag in the main component of my angular project and is called in multiple components. When I run my tests I get the above karma error. I assume this is because the component is not created in the service.spec.ts file. I have checked and the class is defined in the main html file.
service.ts function:
onCLick(value: string): void {
document.querySelector('div.class').innerHtml = value;
}
service.spec.ts:
descirbe('ClickedService', () => {
let service: ClickedService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(ClickedService);
});
to("#onClick should add to innerHtml", () => {
service.onClick('test value'); // error is here
});
});
welcome to the StackOverflow. To be honest, I wouldn't bother with fixing this unit test, because it looks like your approach to update the value is completely incorrect in the first place.
In Angular world, Service should provide you with values, and it can obtain them either from server via HTTP, or as a result of internal calculation. Then it's up to a Component, which is using this service, to deal with the value and display it if needed.
The reason why your test is not working is, that while creating the TestBed for the service, HTML is not expected and you are not providing any. Your querySelector within the service can't find the div you are looking for and you can't set innerHtml value to null.
If you really want to make this value and this logic available within the application, move it to a standalone component. You can then add it wherever you want, it will wrap the logic and it will prevent the repetition of the code. Don't use service with JS queries to update HTML, this will only lead to serious issues in the future.
Check this article about binding in angular to get better idea of what to do.
I have a parent form, and a child for within a main component. I am trying to get the main component to read the data from the parent form, but am getting an error: cyclic object value in the console.
My guess is that it is the parent form being defined in form-one and form-two, but I don't know how to do the following:
1) create a nested reactive form (form-two) that is shared with the
parent form (form-one)
2) Allow the main component to access the
form value of the parent and nested form.
My stackblitz example: https://stackblitz.com/edit/angular-dkddez
What am I doing wrong?
the error you're seeing is because you're applying the json pipe to a form group, which just isn't going to work because it has a recursive structure that can't be represented in string. apply it to the value:
{{formComponent.parentForm?.value | json }}
if you want all components to use the same form group, then make sure you're actually passing it to your sub component:
<app-form-two [parentForm]="parentForm"></app-form-two>
I have just started with Angular 4 and I need to develop a CRUD grid, where the user can add, edit or delete rows.
During my research I found this article where it shows how to create the grid and also the actions: Angular 4 Grid with CRUD operations.
Looking at his code, what called my attention was the way he is using the ng-template to toggle between edit/view mode.
<tr *ngFor="let emp of EMPLOYEES;let i=idx">
<ng-template [ngTemplateOutlet]="loadTemplate(emp)" [ngOutletContext]="{ $implicit: emp, idx: i }"></ng-template>
</tr>
On the article he uses template driven forms to edit the row. However, I was trying to change to reactive forms.
In my attempt to do that, I tried to replace the [(ngModel)] to formControlName and I got some errors. My first attempt I tried to add the [formGroup] at the beginning of the template html inside form element. But when I tried to run and edit the row, I got the following error:
Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).
When I tried to move the [formGroup] inside the ng-template it works, however I was not able to bind the value to the fields and I had to set the values in the loadTemplate function:
loadTemplate(emp: Employee) {
if (this.selemp && this.selemp.id === emp.id) {
this.rForm.setValue({
id: emp.id,
name: emp.name
});
return this.editTemplate;
} else {
return this.readOnlyTemplate;
}
}
This works and show the values inside the fields in a read only mode :(
Here is the Plunker of what I have got so far.
How can I make a reactive form work with ng-template and how to set values to edit the entries?
Any help is appreciated! Thanks
Actually your form is not readonly, you are just constantly overwriting the input you are entering. Since you are having a method call in template (which is usually not a good idea), loadTemplate gets called whenever changes happen, which in it's turn means that
this.rForm.setValue({
id: emp.id,
name: emp.name
});
gets called over and over whenever you try and type anything. We can overcome this with instead setting the form values when you click to edit. Here we also store the index so that we can use it to set the modified values in the correct place in array, utilizing the index could perhaps be done in a smarter way, but this is a quick solution to achieve what we want.
editEmployee(emp: Employee) {
this.index = this.EMPLOYEES.indexOf(emp)
this.selemp = emp;
this.rForm.setValue({
id: emp.id,
name: emp.name
});
}
so when we click save, we use that index...
saveEmp(formValues) {
this.EMPLOYEES[this.index] = formValues;
this.selemp = null;
this.rForm.setValue({
id: '',
name: ''
});
}
Your plunker: https://plnkr.co/edit/6QyPmqsbUd6gzi2RhgPp?p=preview
BUT notice...
I would suggest you perhaps rethink this idea, having the method loadTemplate in template, will cause this method to fire way too much. You can see in the plunker, where we console log fired! whenever it is fired, so it is a lot! Depending on the case, this can cause serious performance issues, so keep that in mind :)
PS. Made some other changes to code for adding a new employee to work properly (not relevant to question)
I'm trying to create a table with collapsible columns, but can't get the table body to collapse with the headers. Here's a fiddle which makes it clear what I'm trying to do: https://jsfiddle.net/ufw4f5qc/9/ and here's a fiddle what I tried which is producing an error: https://jsfiddle.net/oafw74hz/2/
The issue is most likely to do with scope of child and parent. I'm passing in a variable from parent to child using props, but it seems like the child does not take it. Am I binding the prop columnCollapsed correctly?
<tr is="data-row" v-for="record in recordsFiltered" v-bind:record="record" v-bind:columnCollapsed="columnCollapsed"></tr>
In console get the following errors:
vue.js:2611 [Vue warn]: Error when rendering component
Uncaught TypeError: Cannot read property 'Project' of undefined
Side note: you may notice I repeated the code for some methods and filters (formatDollars, formatPercent, etc.) in both the parent and child component - if you have any tips on sharing this code between them do let me know! : )
Needed to do:
:column-collapsed="columnCollapsed"
Want hyphens in html, camelCase in JS.
Hope this helps someone! (The answer was thanks to Bill Criswell)
I am specifying an id property to 'Ext.Container'.
I want to reuse this container in different files. I want to get the childs of this container in multiple files.
But, since I specified an id for it, it gives me an error when I try to access it beyond first time ..
[WARN][Ext.Component#constructor] Registering a component with a id
(gBlock1) which has already been used. Please ensure the existing
component has been destroyed (Ext.Component#destroy().
My code snippet ..
Ext.define('ABC.view.XYZ', {
extend: 'Ext.Container',
id: 'gBlock1',
xtype: ...
......
I was using id property because I wanted to access all of Container's button in one go like this,
var buttons = Ext.ComponentQuery.query('#gBlock1 button');
and use it later as buttons[0],buttons[1] etc ...
What should I do ? How to use itemsId as an alternative for it on Ext.Container
id is a special config in Sencha Touch and designed to be unique per component type, so do not try to use it multiple times.
In your case, there's a much more simple solution:
define some custom config, say:
type: 'SpecialType';
query it later using:
var buttons = Ext.ComponentQuery.query('button[type="SpecialType"]');