I'm a bit surprised that I haven't found complete solution to this, as it seems to be a common use case:
I need help with crating custom angular directive. What I have is a form with basic front-end-side validation and messages in <span> which appear on submit.
I have simple form with validation:
jsbin sample
What I want to achieve:
Things like ng-max-length, ng-min-length, ng-pattern, ng-model etc. shouldn't be hard-coded inside of the template, rather passed as arguments from my custom-tag to the inside of directive's template - and assigned to the <input> element. (even fancier would be to assign some of the attributes to input and some other for example inside of label so that directives template can contain not only the input, but a bit bigger part of HTML, including the label)
two kinds of validation - one by highlighting the fields basing on the classes (no problem with that), second one with <span> elements appearing on submit
What problems am I facing?
How to pass the arguments (attributes) from my custom-tag to the input inside of the template?
I have now in one HTML file: formName.inputName.$error.typeOfError; How to achieve that now from the inside of the directive/template? Somehow parameterizing it.
Regarding showing validation messages on submit: Is the variable submitted set when pressing submit button and cleared when resetting the form a good idea or there is a nicer solution to that?
Make the scopes isolated so multiple instances of the directive do not interfere with each other.
Thanks in advance for help.
The docs for creating angular directives don't really give examples but what you need is the scope property defined.
Check the following:
https://jsbin.com/zabuza/edit?html,js,output
Also, be very careful with using input[number], caused me major headache in this example as it's not a normal ng type of directive.
Docs I used:
docs1
docs2
Related
I have a drop down in Angular that is a 2 way bound FORM control. When the form loads all I want to do is set a default value on the bound value so it displays that value in the drop down. When I change the value in the drop down and print to console I see the binding is correct. However the first time it loads the default value is not displayed in the drop down (not preselected) . In this sample when the form loads "cow" should be the default selected item but it is not working on page load. Please advise what is wrong in the code.
https://stackblitz.com/edit/angular-error-initial
Programmattically assign the value to your FormControl...
ngAfterViewInit(){
this.animalControl.setValue(this.animals[2]);
this.animalControl.markAsTouched();
console.log('FormControl Value: '+JSON.stringify(this.animalControl.value))
}
Stackblitz
https://stackblitz.com/edit/angular-error-initial-atr11t?embed=1&file=app/select-hint-error-example.ts
Revision
Use of ngModel with FormControl has been decprecated and is removed from Angular 7... you should start getting use to accessing values from the FormControl.
console.log('FormControl Value: '+JSON.stringify(this.animalControl.value))
https://next.angular.io/api/forms/FormControlName#use-with-ngmodel
This has been deprecated for a few reasons. First, developers have
found this pattern confusing. It seems like the actual ngModel
directive is being used, but in fact it's an input/output property
named ngModel on the reactive form directive that simply approximates
(some of) its behavior. Specifically, it allows getting/setting the
value and intercepting value events. However, some of ngModel's other
features - like delaying updates withngModelOptions or exporting the
directive - simply don't work, which has understandably caused some
confusion.
In addition, this pattern mixes template-driven and reactive forms
strategies, which we generally don't recommend because it doesn't take
advantage of the full benefits of either strategy. Setting the value
in the template violates the template-agnostic principles behind
reactive forms, whereas adding a FormControl/FormGroup layer in the
class removes the convenience of defining forms in the template.
To update your code before v7, you'll want to decide whether to stick
with reactive form directives (and get/set values using reactive forms
patterns) or switch over to template-driven directives.
We have an input field in html which is bound to a javascript value via [ng-model]. What we've found is that the text value bound to does not actually appear in the DOM, which seems to be by design.
However, we test certain elements via Ranorex, and we'd like to test this one, and Ranorex doesn't (as far as we know) have access to the Angular scope, only the DOM, via "AccessibleValue".
This would seem to be the same problem we'd have to solve if we wanted to check any user-entered text in Ranorex, we're just not sure how to solve it.
How do I check the value of an ng-model bound input field programmatically using Ranorex?
EDIT: We've actually found this is an artifact of running angular inside a QtWebView (in the real world, you can just check the input's value), which means we've got 3 independent programs that we're expecting to behave nicely with each other...
Maybe it is possible to get the values by using the ExecuteScript() method.
A code sample can be found on the following forum post:
http://www.ranorex.com/forum/code-snippet-for-executescript-function-with-return-type-t5070.html#p21345
I hope that helps.
I am facing an issue. I have a collection of object with size around 22K records. I need to bind this to an select element. Binding is working fine for small collection but such a big collection is freezing UI until its bind completely.
Please suggest the best I can do here....
First thing that pops to mind is using one-way data binding. That is accomplished by appending :: in front of your HTML variables like so
{{::someVar}}
This way, angular will not include someVar in its watchers.
If that is still not enough for you then you might consider writing a special type of select for your own purposes which can use something like ClusterizeJS behind it.
ClusterizeJS allows only rendering a few elements on the screen and re-rendering on scroll such that the user will never know that not all the elements already exist in the select. Couple this with a search bar and you've got yourself a very fast select.
In general it is not wise to populate a <select> element with such a huge number of records. That applies no matter which framework you are using (although it would be especially bad with Angular and two way data binding).
Where you want the user to be able to select from a large number of options, I would recommend using an 'autocomplete' style of interface, where the user types a few characters and the client fetches options that match what they have typed so far.
For example, you could use Angular-UI select
Can anyone help me in creating a Angular-js Directive that can handle three field date,
I need a directive for the solution specified in the below link,
http://plnkr.co/edit/lHffXV7xEda0xYorucMe?p=preview
I tried out a couple of solutions and was not rendering properly.
Any plunker illustration would also help. A plunker link is specified below,
http://plnkr.co/edit/lHffXV7xEda0xYorucMe?p=preview
See ngModelController for an example how to implement a custom directive with ng-model support. I have created a simple implementation based on this example, you can see demo here.
My current implementation has one drawback - it does not handle invalid dates correctly. To fix this you could either make sure that user cannot enter invalid date or add validation support to the directive via $formatters and $parsers of ngModelController. I guess the latter would not be difficult, if I have time I'll try to do that later.
I'm designing a page with forms for editing fields in a database. At first I was using FormView controls, but for various reasons I've changed them for DetailsView controls instead. These are so much quicker to code and the code is much tidier, because you just add a Boundfield for each field you want to display. No textboxes, labels, etc. So far so good.
However, the textboxes in my FormViews all had the onchange property specified, which called a JavaScript function. Basically it was the mechanism to alert a user that changes had been made and needed saving, and it worked perfectly.
Unfortunately, you can't add the onchange property to a DetailsView Boundfield. I've tried adding it programmatically in code behind (VB) in the DataBound event of the DetailsView, working on the theory that when the page is loaded the Boundfields are rendered as textboxes but, as expected, it doesn't work.
Can anyone suggest a way to replicate the functionality of the textboxes in my FormViews, calling a JavaScript function when text in a Boundfield is changed? I'd really like to stick with DetailsViews and Boundfields if I can. And if I could achieve this in code-behind, perhaps iterating through the fields to add the functionality, that'd mean just a few lines of code for each DetailsView, rather than adding it declaratively for every Boundfield (there are LOTS!).
This was way easier than I thought. It's possible to add the onchange property to the DetailsView itself. Once that's done, any change to any field within the DetailsView calls the JavaScript function.