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.
Related
<input type="radio" :value="myValue" v-model="value" />
I'm trying to create a radio button and wrap it in a component, so value becomes a variable. The problem is that I'm getting the following error:
:value="myValue" conflicts with v-model on the same element because the latter already expands to a value binding internally
I've tried to replace v-model with direct bindings but I cannot replicate the same functionality. Why does this error appear in this case? This is taken directly from official docs for the radio buttons.
v-model is just shorthand for :value="someVar" #input="someVar = $event". meaning you are assigning the value twice. Depending on your need you can do :value="someVar" and then have a custom function handle the input like so:
#input="someFunc" this function would accept the input (by default) and then you could update myVar as you desire.
See here for a more detailed explanation
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">
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.
I was reading this artcle and in the article I see:
<input type="search" [formControl]="seachControl">
and
<input type="text" formControlName="street">
I am wondering what the correct syntax is for stating formControl and formGroup. Can I do something like
<input type="text" [formControlName]="street">
or
<input type="text" [attr.formControlName]="street">
or
<input type="text" [formControl]="street">? And more specifically how do the three instances differ?
[formControl]="seachControl" is what we call model binding, it's binding to the main form element i.e. search.
When you have a single form Element, i.e. search you're just simply model binding it to whatever variable you created inside your class and do keep in mind the type of the variable you bind to.
and as for the
<input type="text" formControlName="street">
since street here was created inside the main formControl element you don't have direct access to street variable. so what this directive is doing is telling that the main/parent element that this tag is should bind to the street you created inside the main formControl.
As for
<input type="text" [formControlName]="street">
I don't know but I think the formControlName doesn't actually do the binding it is sort of telling what this tag needs to bind to. And the syntax suggests that it will try to look for street variable inside your class bind it.
as you can see he says.
This is where the formControlName directive comes into play. It’s pretty much the equivalent of an ngModel and name attribute combination in template-driven forms. Each form control gets a formControlName directive applied so we can register the controls on the outer form
So you only need to bind the outer model since that exists/instantiated in your class and formControlName and formGroupName will take care of the inner elements.
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/