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.
Related
I seem to have an odd error, and I am not sure if it is my assumption which is incorrect here or not, but there is no docs on the subject.
So when you make custom elements/attributes and you set members on that class, they are per use, so every usage of these custom attr/elements would have their own instance of the class to go with it.
However it currently seems that when using binding behaviours the class is shared between all uses of that binding behaviour, with the bind method being the point of isolation.
I say this because I was assuming they were all setup to be an instance per use and in this case some async logic is getting a value from the last used binding behaviour on the class i.e this.someClassStateVar.
So can anyone confirm if Aurelia uses binding behaviours in a singleton scope?
=== Edit ===
Based upon first answer I wanted to confirm scenario:
<section with-binding.bind="something">
<input value.bind="somethingElse & someBindingBehaviour">
<input value.bind="somethingElse2 & someBindingBehaviour">
</section>
So I was expecting that there would be 2 instances of someBindingBehaviour class and each would be applicable to the relevant input, but the behaviour I am seeing is that they both use the same instance of the someBindingBehaviour class.
In Aurelia, value converters and binding behaviors are singletons. They should be stateless. Some types of binding behaviors may need to keep track of some state, the best place to store that state is on the binding instance (passed to the binding behavior's bind and unbind methods).
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
I was browsing the Angular docs and I came across the FormController class. I see that there are a couple of methods for adding controls and removing them, namely $addControl() and $removeControl(). I assume these will be used for dynamically adding and removing form controls, but how exactly do I go about using them?
formController tracks a set of child input controls in it for the purposes of setting the controllers of these child input controls on the scope, and of tracking the $dirty/$pristine, $valid/$invalid, etc... status of the form based its child controls.
This API is called by ngModelController - which is how Angular implements its built-in (and provides hooks for custom) input controls and by formController - of sub-forms to register themselves with their parent formController.
If you implement custom input controllers that require: "ngModel" (i.e. custom input controls that support the ngModel abstraction layer), then this is done for you.
And for the vast majority of cases, this is sufficient. But, presumably, one could implement their own ngModel-like directive, then this API could be used to register the non-ngModel control with a formController.
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 working on a project that basically consists of complicated form containers repeated in an ng-repeat. Each of these forms has enough functionality that it could easily be its own angular app, but instead they are repeated on the screen, and there can be up to 30 of them.
With 5 or more of these on the screen, performance becomes very slow. Although I tried to disbale some of our heavier features, it seems that the big performance wins just come from disabling the 'uninteractable' scopes.
I am looking for a good pattern to 'freeze' the unused scopes. I want them to maintain their state, but I don't want them to listen or be attached to anything until the user focuses on the form that they apply to.
Without seeing your code my first thought is to use a directive to control that.
You could use the bind to the forms, and or use $watch(using $watch would depend on your setup) so that you have finer control over the scope.
here are some links:
for directives in general
for $watch and other ways of controlling the scope
Are all the forms in the view port at the same time? If not, you could add / remove forms to the DOM (using ng-include f.e.) based on whether they are visible to the user. This way watches are removed and added again when needed.
Otherwise, if you have a lot of watches you specify in your form controller, you can unwatch when not focused and rewatch when getting back the focus. This won't reduce the number of watches created by the (native) directives inside your form. This number can perhaps be reduced by using bind-once.