Binding default input field values with ng-model - javascript

I'm currently writing an application in AngularJS, and I've stumbled across a problem while using ng-model with input fields.
In the case that a user does not enter any text in one input field, is there any way to bind a default value to the ng-model? A sample of the code is shown below:
<input class="formInput" placeholder="{{ testVar.hasName.name }}" type="text" id="nameUpdate" ng-model="upd.name">
The idea is a user will be updating data. The placeholder will show the existing data, in this case the name, and updating this field will bind to the model. However, if a user does not wish to update this particular field, how can I bind the existing value to the model? I've noticed giving the input a value="xyz" prevents the ng-model from working properly.
I should note defining this information in the controller as a default is not an acceptable solution, as the data within testVar will vary.
Thanks in advance for any help.

Not the best practice, but you can init a default value with the help of ng-init:
<input class="formInput"
placeholder="{{testVar.hasName.name}}"
type="text"
id="nameUpdate"
ng-init="upd.name='defaultTextHere'"
ng-model="upd.name">

Related

Is it safe to use "readonly" elements in the form of ejs template?

I would like to know if any script with readonly elements is editable through bypassing. Im practicing an ejs template where I used the below script. People suggested me not to go with this action and mentioned it might not be secure.
For instance;
<input
type="text"
id="name"
name="name"
class="form-control"
value=<%= name %>
readonly/>
the name in the value will be the default value from the database. Is it possible for any malicious actors to edit the name even if it is non-editable? or if I use disabled elements, How could I make the value posted to the database?. I would like to know If there is any work around.
Could you please advice?
Thanks.
Yes, if you send values directly from this input, user can delete the readonly part and change the value. This can lead to undesirable results.
1. You can create a short-term Session[] for the value you want to send.
2. You can call it from where that you want to post it. (So there will be no link between the input field and the value you call there. The İnput field will only be used for view. You can also delete it or change readonly to disabled if you want.
my point of view 2>1.
You need to check value on the backend/server side too. You can't know if attacker is submitting value via your form or specially crafted request.

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.

Updating one input by changing another input in angularJS but directly inside html

I have two input with different model, one of these input may change and be updated. I want the other input to have the save value as the first one. I do not want to use $watch. I am using ng-change for the first
this is the first input:
<input type="text" placeholder="input one" class="form-control" ng-change='second_model=data.first_model' ng-model="data.first_model" required>
And this is the second input:
<input type="text" placeholder="input two" class="form-control" ng-model="second_model" disabled required>
The ng-change is not working unless the input value of first input changes by typing inside the first input field. When the data.first_modelis updated inside the controller the ng-change is not doing its job.
I know a solution to force the second one to get the value from the first is using $watch like this:
$scope.$watch('data.first_model', function(v){
$scope.second_model =v;
});
But I have a constrain that I can't call function inside controllers I want to handle it right inside the html code as you see I did like this:
ng-change='second_model=data.first_model'
But ng-change do not do its job if the first one change by some function inside the controller. I highly appreciate any trick or solution.
See this code it helps you. I think ng-change is not required for your scenario.
HTML:
<input type="text" placeholder="input one" class="form-control" ng-model="data.first_model" required>
<input type="text" placeholder="input two" class="form-control" ng-model="data.first_model" disabled required>
app.js (controller):
app.controller('MainCtrl', function($scope) {
$scope.data={};
$scope.data.first_model="Kumar";
});
to view see this plunker link: https://plnkr.co/edit/H0yFffJG3EqpDipbqhX7?p=preview
I m not sure if I understand your question properly, if you just want to have a duplicated display, you can just bind to the same model.
However, if you want to have A affect B without function while B can still have its own variable without reflecting back to A, wrap the element that B is binded in a directive and passing A to the directive, and inside of directive define the parameter scope as read only and assign it to B, so A will change B while B can still make change without hurting A.
From your question:
The ng-change is not working unless the input value of first input changes by typing inside the first input field. When the data.first_modelis updated inside the controller the ngChange is not doing its job.
This is the problem. ng-change is doing it's job.
From the docs:
ngChange: Evaluate the given expression when the user changes the input.
ngChange is only fired when the user changes the input in the view. ngChnage will not fire if the model is changed outside the view, such as in the controller, regardless of if the model is bound to the input.
If you are changing the value of your first model outside of the view, then your only option is to update the value of the second model also outside of the view.
You'll need to change the architecture of how you are trying to accomplish what you are trying to accomplish. If you post your full code, we can be of more help.

show validation message after user enters invalid value and focused out and then on keyup,using knockout validation

I am using knockout validation to validate the data before updating in db.
I am not so familiar with knockout validation.
"valueUpdate" in data-bind for an input box is with "afterkeydown", for which, each time i am giving some invalid value the message is coming up.
But I want to show the message after user first time focused out from the input box. After that I want to show the message on key up.
If I can set the valueUpdate after focus out from view model, this may help.
Since I am having other bindings in data-bind, I can't just add data-bind attribute from vm.
I checkedthis link.
Any idea how to do this?
Your fiddle example is using Knockout 2.3. If you use Knockout 3+ you can use the textInput binding.
The textInput binding links a text box () or text area () with a viewmodel property, providing two-way updates between the viewmodel property and the element’s value. Unlike the value binding, textInput provides instant updates from the DOM for all types of user input, including autocomplete, drag-and-drop, and clipboard events.
So instead of:
<input data-bind='value: emailAddress,valueUpdate:"keyup"' required pattern="#"/>
your binding would look like:
<input data-bind='textInput: emailAddress' required pattern="#"/>
Here is an updated fiddle:
https://jsfiddle.net/mx45nnL6/2/

Difference between ng-model="xxx" and value="{{xxx}}"?

In a regular form, when a reset type button (<button type="reset">Reset</button>) is clicked, all input controls will be emptied except readonly or disabled.
http://jsfiddle.net/blaise_liu/K2f7g/
When constructing a form using angular, I have
<input type="text" id="district" disabled="" ng-model="address.district" />
In this form, when the reset button is clicked, the value in the input above is removed even it is marked as disabled or readonly. Why? Should I use ng-model to bind to this input control? Do I have to use value= to make the binding?
<input type="text" id="district" disabled="" value="{{address.district}}" />
ng-model supports 2-way data binding. When you use ng-model the value of the model is bound to the view and updating the model will update the view and vice-versa updating the view updates the model. Using {{address.district}} does not 2-way data bind. It only outputs the value of the model. See: https://docs.angularjs.org/guide/forms.
The button type reset is resetting the model regardless of the disabled property. If you don't want 2-way data binding you can just use {{address.district}} as you have mentioned. See: http://jsfiddle.net/K2f7g/1/.
ng-model adds parsing and validation. Just interpolating the value isn't sufficient for that.
In your fiddle, you denote a field as required. required is also another directive that works with ngModelController.

Categories