I want to use some Custom directive in editable-text
<span ui-Blur="testfn(price);" editable-text="entry.product_id"
e-name="product_id" e-style="width: 200px" e-form="sentryform"
e-required>
</span>
I want to trigger some event on blur on the above text box I have written the directive for that which is working with normal text boxes but not with above shown "editable-text".
x-editable has nice feature were all directives prefixed with an "e-" get appended to the actual edit control (with the "e-" striped of course). For example to add style in the input box you add:
e-style="color:red"
So adding:
e-ui-Blur="testfn(price)" on the span element you talk about, would result in that being added to the input dom element generated when entering edit mode.
Related
I'm using primeng tooltip, and I need to show the tooltip only when the input is invalid. I'm using following code but the tool tip is displayed on hover or on focus.
I have tried using tooltipDisabled and tooltipEvent.
<input type="url" name="url" class="form-control" pattern="(https|http)?://.+"
formControlName="url" [disabled]="flag2" pTooltip="Please enter URL in valid format"
tooltipPosition="left" tooltipEvent="focus">
Expected: Tooltip should be displayed only if input box is invalid
Actual: tooltip is displayed on hover or focus
So the short answer is: no, you can't.
The long answer is: you can show it programatically, but it will also still display through the only options made available by primeNg - onHover and/or onFocus - unless you remove those interactions from the element.
Displaying Tooltip programatically
What you can try and do is force the event that triggers the tooltip on the element on which you have it attached to. There are several ways that can be used to find an element, and that is not your question, but you can find your url input field for example by looking for it on the DOM through its name.
var element = document.getElementsByName("url")[0];
After whichever validation you have fails, you can use that variable to dispatch the event that triggers the tooltip.
element.dispatchEvent(new Event('mouseenter'));
When the element is valid you can make the tooltip disappear by also dispatching the appropriate event.
element.dispatchEvent(new Event('mouseleave'));
As I said above, this will not prevent it from appearing when you hover or focus your input, but it answers your question of how it can be done.
Workaround to prevent standard behaviour
In order to not have the tooltip appear whenever the Element is hovered or focused, I suggest that you actually attach it to another element alltogether. One that you can create and connect right next to your input field, or in it. The important thing is that it is not the field itself that you want to interact with. And then you can use CSS and add to the element with the tooltip no mouse events, for example through a class.
.noPointerEvents {
pointer-events: none;
}
This will ensure that the user won't activate the tooltip with the mouse. And it will only trigger through the previousl given code. You can also disable tabbing, if you selected one element that can be tabbed through.
There is a hack. But it is a hack and I would not recommend this. Since primeng doesn't expose any way to control the tooltip you have to do it by accessing the element manually. Following is one way to do this.
Add two classes to the tooltip using tooltipStyleClass, one class d-none which has display:none !important; property and other class random-class to access the element using jquery or javascript. Using jQuery we will access the element and remove class d-none when the input is invalid. This check has to be implemented in (focus) = 'onFocus()' function.
In the onFocus function remove the d-none class from the tooltip element if the input field is invalid. If the input field is valid then add the d-none class to the element
HTML
<input type="text" pInputText pTooltip="Enter your username" placeholder="Right" tooltipStyleClass="d-none random-class" tooltipEvent="focus" (focus)="onFocus()">
CSS
.d-none {
display: none !important;
}
Javascript/Component
onFocus() {
if (//input field invalid) {
setTimeout(() => {
$('.random-class').removeClass('d-none');
}, 100);
}
}
I cannot stress enough on the fact that this is a hack, I do not recommend this but it gets the job done. If you want to replicate this on other input fields then every field should have different random class name to access that specific element.
I'm using a angular xeditable text control. I want to open it in edit mode automatically. How can I do it?
My question is similar to this one however, I am not using editable-form (not using a form element at all). The only solutions I find are using the editable-form's $show() function, but you do not have it if you do not have an editable-form.
While at it, I also would like to use the functionality provided by editable-form's $setError() function, without using an editable-form and not through the onbeforesave or onaftersave attributes (I want to do it upon opening the xeditable text control, not when user submits). Is it possible ?
I do not want to use an editable-form because I have just this one xeditable input, and the use of a form changes things like submit, blur, buttons displayed, etc. in ways that I do not want.
i'm using tabs directives in my template file (all tabs are defined there). Each tab contains several fileds that belongs to form (this single form fields are splitted into several tabs). When the whole form is validated some fields might get class '.has-error'. How can i highlight (give special backgorund color) only those tabs that contain fields with '.has-error' class inside related tab content?
The solution is as follows: Wrap each tab content in an ng-form:
<div ng-form bind-validity="tab1Invalid">
...form controlls...
</div>
Use the bind-validity directive from here (or any equivalent way to pass form validity status to the parent).
Now add a class to the tab header according to the form validity:
<tab>
<tab-heading>
<span ng-class="{boom: tab1Invalid}">...</span>
</tab-heading>
...content...
</tab>
A working solution here.
you can add a css class (in this case "my.tab") to your tab directive. Then you can accomplish it like this:
.my-tab .has-error {
background-color: #f5f5f5;
}
--- update ---
after recognizing that you didnt mean the actual controls but the tabs, I would suggest this solution:
Add a directive to each tab that watches the form's status. You could just watch the $valid property of the form and set your highlighting within the directive for your tab according to the $valid value. Value will be passed over by watch function.
--- update ---
didn't know about functionality stated in the other answer. Pretty perfect!
Hi I would like to customize behavior of the ui-select little bit. I use two bootstap themed ui-select controls on my page with the help of templatecaches. In the template, I wired up arrow button click event using ng-click tag. That way I can easily catch the click event on the arrow button, and in my controller I can open a popup using function, for instance:
<button ng-click = "someFunctionInTheScope()">
For instance if I have two of those ui-select elements in my view, I need to differentiate which arrow button is clicked to display the correct popup. Since I am using the same template for two ui-select controls and since theoretically I can have any number of these controls on my page, I can not easily add a parameter to the method in the template to differentiate which arrow image of which ui-select control is clicked:
<button ng-click= "someFunctionInTheScope(1)">
Because both ui-select control would be using the same template code and 1 would be passed to the controller function for both of them.
Therefore I need to find a more clever way of changing the template dynamically once and for each control.
So I thought about having something like
<button ng-click= "someFunctionInTheScope($select.id)">
but when I debug it I see that functions parameter is undefined, every time it is clicked.
Can somebody please show me how to hack this?
There is no id property on the $select object. You're best bet is to pass something through the scope of the element containing the ui-select boxes. In other words, your code needs to generate a unique identifier for each ui-select box you have. This could be the $index property of an ng-repeat block, a timestamp, or something dependent on other context.
A little more context and I can provide a more specific answer.
I would like to use the angular x-editable directive to work with a text field per the following
(a) I don't want to display buttons. I tried the buttons=no option but it does not seem to work with input of type text.
See the fiddle here.
(b) I want the underlying ng-model property to update immediately with each keystroke , without waiting for the user to focus out of the input. (as is default behavior with vanilla angular, eg. <input type=text ng-model="somepropertyname" />
How can one achieve (a) and (b) with angular x-editable? link to fiddle
Answer to 1(a) is to add the blur="submit" attribute (in addition to buttons="no")