My application so far is working great. It is not a form (no form tagged used) but it is a series of input boxes that a user must enter. Each input box that a user fills, I am adding an orange border on that input field. I am doing that through:
app.css:
#modifyTop .ng-dirty{
border: 2px orange;
}
index.html:
...
<body id="modifyTop" name="modifyTop" ng-controller="ModifyPageCtrl">
<button ng-click=save()>Save</button>
....
Inside this index.html is a save button. Once I hit the save button, the border field goes away. I am doing this through (I used jQuery inside an Angular controller, not sure if thats acceptable):
ModifyPageCtrl.js:
....
function save(){
....
$('#modifyTop .ng-dirty').removeClass('ng-dirty')
...
}
So the problem is the following. After hitting save, if say the user wants to change again a particular input field, then it does not make that orange border show up. Only the fields that were previously untouched/not modified have the border appear. I have to reload the page, to make the border appear again in those particular input fields. Can someone please provide examples on how I can make this work? I understand I have given very small snippets of my code thats because my work doesn't allow me to paste company code but I will try to provide more details if people are unable to help with the provided information. Also, would like to mention that my app has no errors- this is a enhancement fix that i am working on.
Thank you
You need to use $setPristine():
http://docs.angularjs.org/api/ng/type/form.FormController
From the docs:
Sets the form to its pristine state.
This method sets the form's $pristine state to true, the $dirty state
to false, removes the ng-dirty class and adds the ng-pristine class.
Additionally, it sets the $submitted state to false.
This method will also propagate to all the controls contained in this
form.
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 am implementing edit feature with react now. The problem is that I haven't found the good solution for this yet.
I want to make a view like below.
Both title and description text area are already written with default text.
This text is not placeholder.
If user click the button, User can edit the text.
I tried the below two packages but it is not perfect for my purpose.
TextareaAutosize
import TextareaAutosize from 'react-autosize-textarea';
TextareaAutosize has a value attribute. but if I use this, I can't edit the text in it. And the defaultValue seems not working.
Do you know how to put a default text value into TextareaAutosize component?
2.AvInput
import { AvForm, AvField, AvGroup, AvInput, AvRadioGroup, AvRadio } from 'availity-reactstrap-validation';
I think this is another good solution but the submit button seems not to be customized.
I should place the Edit button in the right-upper side of view.
But if I use this package, The submit button is placed at the bottom and it seems like it should be used tag.
Do you know how to connect my own submit button with AvInput?
The button is in other tags, not in its .
https://availity.github.io/availity-reactstrap-validation/components/avform/
<FormGroup>
<Button>Submit</Button>
</FormGroup>
other solution
If you have a better solution or experience, plz let me know.
Thank you in advance
I referred to the below answer and changed UX.
Submit form using a button outside the <form> tag
The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.
submit button seems to be included in the form tag.
I'm using angular x-editable in my project for an editable popover. I've successfully made changes to the look of my confirmation button to an .svg I wanted to use and removed the Cancel button doing:
app.run(function(editableOptions, editableThemes) {
editableOptions.theme = 'default';
editableThemes[default].cancelTpl = '';
editableThemes[default].submitTpl = '<img class="popoverSubmitBtn"
src="images/confirmationBtn.svg" ng-click="$form.$submit()">';
});
However I am having issues when trying to change editableThemes[default].inputTpl. It seems like changes to inputTpl are not being registered for some reason. What I would like is for the input box that shows in the popover to have a circular 'x' button to clear the current input WITHIN the input text field.
This was actually default behavior in the original x-editable (see here at Twitter typeahead.js demo). While there is an equivalent to use editableOptions.displayClearButton=true, this creates an entire button next to the input box, much like the confirmation button, which is not what I want.
My plan was to use a directive here that provides the 'clear' button and use editableThemes[default].inputTpl = '<input type="text" reset-directive>'; but again, seems like its broken. Even this open issue here leads me to believe it was never working as intended.
Has anyone had any luck with this or knows of any workarounds that may help in my situation?
ALSO- a bit unrelated but on the topic of styling, how do I move the position of where the popover shows up? Currently it's smack-dab in the middle of where my cursor is when I click the text to activate popover, but I would like it a bit higher and to the right.
Got it working. For those with similar issues:
Styling for the popover can be controlled through xeditable.css found in the bower_components directory after installation
While inputTpl isn't functioning the way I expected, I added the
custom directive to the input field using e-* (i.e. e-my-directive) with no issues.
I have a form with some tabs.Each tabs has set of some controls which are binded using angularjs and has ng-model .I want to check whether user has entered or modified any data in a particular tab during submit.
myForm.$dirty will check whether user has interacted with the form. But I need to check controls are filled in particular tabs and give some appropriate messages . So can i check angularjs watch or ng-dirty for each controls and verify that user has modified data. Is there any other good solution for the same?
In angularjs you can make very different validations when using forms and classes like ng-dirty and ng-touched.
This way u can check wether determined control has been modified.
ng-dirty: the control has been interacted with
ng-touched: the control has been blurred
Also you can check validity or other similar things.
U have all the docs at:
https://docs.angularjs.org/guide/forms
Anyway, you can also check this with the FormController
https://docs.angularjs.org/api/ng/type/form.FormController
And then show the messages with angular directives for bootstrap (see Modals)
https://angular-ui.github.io/bootstrap/
As you say, you have different controls and you need to show different messages depending on the control and on the user´s input. Then I think the way you musts code it, is by looking for ng-dirty or ng-touched
There you have an example about how using it:
http://www.w3schools.com/angular/angular_validation.asp
Hope it can help!!
I have an input box and Its bound with datepicker. In my view, there is small calendar icon besides this input box. I want to trigger click event of an input box when user clicks on this calendar icon. I have done this using directive which I have applied to calendar icon. But its almost like jQuery. So is there any different way to achieve this? If my approach is wrong then please guide me to the right direction. I am new to angular and I have read some articles where I read that avoid use of jQuery. Thanks
My Directive
myApp.directive('openCal',function($compile,$filter) {
return {
link:function(scope,element,attrs) {
element.bind("click",function() {
element.siblings("input").trigger("click");
});
}
};
});
Its working fine. But I am not sure that is it right approach or not??
No, if I understand what you are trying to do you are over-complicating things a bit.
In your case it looks like you would have something like:
<img open-cal/>
<input ng-click="doSomething()">
Where click on the img triggers a click on the input, via the openCal directive. Instead considering doing something like this:
<div ng-click="doSomething()">
<img>
<input>
</div>
If doSomething() needs to get data from the input, use ng-model to bind data from your input to your scope.
ALTHOUGH!
If you ever need to do a directive, that is the right way to do it. Using element.bind is not a problem since that is included in Angular. What you want to avoid is using stuff like $('.calendar').click and such.
Another way to approach this would be to add a <label> element for your input field that contains the calendar. Then clicking the calendar would focus the input field. Then all you'd have to do is listen for the focus event on your input field to do your extra work. This has the added bonus of working if someone navigates to your input field via the keyboard by hitting the tab key.