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.
Related
Considering the code below, i am trying to understand the difference between three different ways to do data binding. Since i am new to angular4 i need some clarity regarding when to use what. e.g. to assign ngModel, [(ngModel)] is used. To assign disabled attribute, [disabled] is used. To assign ngSubmit handler, (ngSubmit) is used. It's hard to differentiate between each one of them.
<section class="sample-app-content">
<h1>Template-driven Form Example:</h1>
<form #f="ngForm" (ngSubmit)="onSubmitTemplateBased()">
<p>
<label>First Name:</label>
<input type="text"
[(ngModel)]="user.firstName" required>
</p>
<p>
<label>Password:</label>
<input type="password"
[(ngModel)]="user.password" required>
</p>
<p>
<button type="submit" [disabled]="!f.valid">Submit</button>
</p>
</form>
</section>
Property binding [val]:
One-way in
People often describe property binding as one-way data binding because it flows a value in one direction, from a component's data property into a target element property.
You cannot use property binding to pull values out of the target element. You can't bind to a property of the target element to read it. You can only set it.
Event binding (val):The bindings directives you've met so far flow data in one direction: from a component to an element.
Users don't just stare at the screen. They enter text into input boxes. They pick items from lists. They click buttons. Such user actions may result in a flow of data in the opposite direction: from an element to a component.
The only way to know about a user action is to listen for certain events such as keystrokes, mouse movements, clicks, and touches. You declare your interest in user actions through Angular event binding.
Two-way binding [(val)]: You often want to both display a data property and update that property when the user makes changes.
On the element side that takes a combination of setting a specific element property and listening for an element change event.
Angular offers a special two-way data binding syntax for this purpose, [(x)]. The [(x)] syntax combines the brackets of property binding, [x], with the parentheses of event binding, (x).
Property Binding is denoted with [ ] Ex. [disabled] [src] [data]
Event Binding is denoted with () Ex. (click) (keypress) (hover)
Two way binding denoted with [()] as there is a property binding and an event binding happens behind the scene. [(ngModel)]
Here is a weird problem in Angular:
<input #pin1 type="password">
<p>You entered: {{pin1.value}}</p>
If you type something in <input>, the <p>'s content will not change which means pin1.value does not have value, does it mean the variable reference #pin1 does not work?
On the other hand, if we add a function to pass the reference, it will work.
<input #pin2 type="password" (input)="test(pin2)">
<p>You entered: {{pin2.value}}</p>
where test=function(x){console.log(x);}
For this <input>, if we type something, the the <p>'s content will change to corresponding text which implies #pin2 works.
So, the question is, in Angular, why we must use function to pass variable reference firstly then we can use it, why we cannot directly use variable reference.
Firstly, that is not how binding works.
What you did is creating a reference to input Dom object. At the time of the creation, the value of that Dom element (input) was empty. hence no value showing in your <p> tag.
if you want to see the value as you type then you are looking for a 2 way binding like so
<input [(ngModel)]="pin" type="password">
<p>You entered: {{pin}}</p>
Assuming that pin is declared in your ts file.
As to why the value was updating when you introduces a function, the answer is because Angular will be calling that function test(pin2) whenever you type something into that input which results in running a detect change on the model.
Long story short, Angular is a Model driven framework, if you need a value, you shouldn't need to get the DOM element to get the value from there.
I may get an ambiguous answer, it may be related to event binding, which means "view-to-source", if we didn't bind any event, the view (user interaction) cannot pass data to source (the component class), so variable reference may not work, but there are still some question like the template references should not be related to source side, since such variables aren't member/properties of component class.
it is so werired behaviour in angular
this code not working
<input #inputval type="text" />
<app-newcomp [testValue]="inputva.value"></app-newcomp>
but if you add "input" event to the input element then it will work
<input #inputval type="text" (input)="someFunctionInTs($event)" />
<app-newcomp [testValue]="inputva.value"></app-newcomp>
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.
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.