Angularjs validation with expression - javascript

I'm trying to implement input validation by angular expression ,I need to do that because i'm going to get validation data from database.
So I'm trying the following code
conttroller
vm.key="ng-required"
vm.value="true"
html
<input type="text" name="field" ng-model="name" {{vm.key}}="{{vm.value}}" >
but this make no change.

You can't use {{}} directive to create attribute dynamically(it will not work), and I don't think so that would be correct approach to do it. I'd like to suggest slight different way to deal with such validation, like you could take use of angular inbuilt directive like ng-minlength, ng-maxlength, ng-required, etc. which does take expression as their attribute values.
like for case it would be something like
ng-required="vm.value"

Related

Angular 9 dynamic ngx-mask issue

I have the following input
<input
[(ngModel)]="myInput"
mask="00-0000-0000||00-00000-0000"
type="text"
>
and I would like to initialize it with a certain value. Let's say 12-12345-1234.
This doesn't work since I only see 12-1234-5123 (The last digit is cut out of the html input and the shortest possibble mask is being used).
I would like to be able to initialize my input with any valid value and see the correct mask applied to it.
To setup a DOM initial Value, you can use the value attribute on the HTML template:
<input type="text" value="any-value-here">
The mask you are trying to use is a production of DOM manipulation logic. It will be achived by running JavaScript code, which modifies the DOM, and depending on the framework you use, or the lib you create the input mask effect, will always overwrite that 'initial' value.
In you case, using [(ngModel)] is not a strict initialization: it's already a value binding "event" made by angular as far as I know. To test your logic, I think it would be a better approach to create tests, or add the mask dynamically to the field if possible.

vue.js - how to bind read only input fields? v-bind:value or v-model?

I am trying to implement a simple vue.js applicaton and I ran into this conceptual question: I have a small set of read only input fields showing values for calculated fields.
I have tried both approaches and I am slightly leaning towards the v-bind approach (v-model is mostly for inputs), but I am really curious about the consequences of using one or the other.
<input id="cp-remaining" type="number" min="50" max="80" size="2" readonly="true" v-bind:value="characterPointsRemaining">
<input id="cp-remaining" type="number" min="50" max="80" size="2" readonly="true" v-model.number="characterPointsRemaining">
From Vue.js guide:
Remember:
<input v-model="something">
is just syntactic sugar for:
<input v-bind:value="something" v-on:input="something = $event.target.value">
So using v-model for input, that cannot be changed is pointless, as it will never generate input event.
Besides, as David L already pointed out, you probably should use something more proper for this use case, like <div>.
As mentioned by Staszek, v-bind:value is the incomplete longhand for the v-model syntactic sugar.
However, in your case, you should use neither.
Inputs are used to convey a very specific set of functionality to the user; that they can interact with the form to provide their input. In this case, they cannot, because you've made the form readonly. However, a readonly input isn't necessarily any better because it implies to the user that you can actually do something to enable the input, which in your case isn't true.
The most correct way to handle this scenario is to not use an input at all, but to use another element that more properly represents outputted data, binding the data via text interpolation:
<div id="cp-remaining">{{characterPointsRemaining}}</div>

VueJS - How to apply directives to all matching tags?

I'd like to apply a directive to all input tags programmatically. Two reasons for this are:
I don't want to have to go through all inputs in my app to add the directive
If I want to change the directive against all inputs at a later date, it's in one place.
Is this possible? I've reviewed the docs but they don't seem to mention applying it in any other way than applying the tag directly to the element.
My current code is like so:
<input type="text" class="form-control input-sm" id="price" v-model="model.doc.price" v-floating-label>
I was having a brain dead moment it seems. I just need an input component. I can then change what I need on there and it will update everywhere the input component has been used and instead of using the standard html input tag, I'll use my component.
Long day ...
I've answered this question myself instead of deleting it in case anybody else has the same brain dead moment in the future ;)
As per Evan You:
Vue.js compilation happens when you instantiate/mount the root instance.
See https://github.com/vuejs/Discussion/issues/77#issuecomment-60339440
I don't think what your are trying to do is sane: search and replace, coming out of the box in many text editors or IDE, will be really helpful for your two explained reasons.
You can bind that directive to a condition like so
<input type="text"
class="form-control input-sm"
id="price"
v-model="model.doc.price"
:v-floating-label=(condition)>
If condition == true , v-model-float directive will be applied to your input.
Update 1: From the comments, the implementation will still be the same, except you control the condition from one place. That way, you can remove the directive at a later date by simply setting that condition to false.

AngularJS Watch Performance Issue

I need to code the following requirement. If it occurs that any form field changes, I need to hide a div with some content. My solution is using $watch with objectEquality == true for watching a complex object that bind to the form fields. But this complex object has around 100 fields to watch.
I think the solution described above addresses the requirement but I've read it could cause poor performance. So, is it the best solution? Do I have others alternatives ?
You may find that performance won't be an issue, 100 bindings isn't too bad. If you do need another solution though, you could put an ng-change listener on all the forms that want to watch, like so:
<input type="text" ng-change = "hideTheThing = true">
<div ng-hide = "hideTheThing"></div>
A lot of things that you think you need $scope.$watch for can and should probably be solved with an ng-change.
<input type="text" ng-change="formFieldChanged()">
Inside the function you can do whatver you like with other scope variables.

Using ng-disabled on a directive

I am wondering if the following is possible:
<directiveName parameter1=value1 parameter2=value2 ng-disabled="true"> </directiveName>
For some reason, it wasn't working for me and I wasn't able to find much examples of a use like this.
I can, however, toggle the visibility of the directive using this:
<directiveName parameter1=value1 parameter2=value2 ng-if="true"> </directiveName>
Why can't I seem to use ng-disabled?
(The purpose of the directive is to make a connection with a topic and display the messages in the topic, so all it outputs is plain text.)
As per the documentation for ngDisabled:
This directive sets the disabled attribute on the element if the
expression inside ngDisabled evaluates to truthy.
But in your case, it seems ngDisabled will be adding a disabled attribute to an element that does nothing with it.
'disabled' only makes logical sense for elements that allow user input or interaction. Out of the box, it works for form inputs, anchor tags and buttons. If you require 'disabled' behaviour for other things then you need to provide it yourself.

Categories