Develop Reference

Add a listner to input element in Angular

I have the below posted input element. I want to know how can i add a listner to the inputelement in such a way that, every time the user change the input values that listener gets invoked and displays the current values
chosen
HTML template
<div id="idDoseLabel1" class="date">
<p>{{ "SITE.INSECTICIDES.DOSE_LABEL" | translate }}:</p>
</div>
<input id="idDoseValue1"
[disabled] = "false"
required
placeholder=""
maxlength="7"
clrInput
type="number"
name="doseValue"
[(ngModel)]=iPesticidesDosesPasser.dose
#name1="ngModel"/>

You can add onChange event on your input element, so as soon as the value changes. You can do something like this:
<input id="idDoseValue1" [disabled]="false" required placeholder="" maxlength="7" clrInput type="number" name="doseValue" [(ngModel)]=iPesticidesDosesPasser.dose #name1="ngModel" (change)="someFunction($event)"/>
and in someFunction() function you can get the value from variable iPesticidesDosesPasser.dose

You can use the change event for input, like this:
<input id="idDoseValue1"
[disabled] = "false"
required
(change) = "test()"
placeholder=""
maxlength="7"
clrInput
type="number"
name="doseValue"/>

You can use FormControl to achieve the same.
HTML Code:
<div id="idDoseLabel1" class="date">
<p>{{ "SITE.INSECTICIDES.DOSE_LABEL" | translate }}:</p>
</div>
<input [disabled] = "false"
[formControl]="doseControl"
required
placeholder=""
maxlength="7"
clrInput
type="number"
name="doseValue"/>
TS code:
doseControl = new FormControl('');
ngOnInit() {
this.doseControl.valueChanges.subscribe(value => {
console.log(value);
});
};
//to retreive value
this.doseControl.value;
//to set value
this.doseControl.setValue('new value');

How to set value for the input value in the element from Javascript?

I am the very beginner for html and js.
I have a js which can set the value of id="tk___kiaVlink" by using the following.
this.form.formElements.get('tk___kiaVlink').update('abcedf ghi');
But both label and link values are updated. How could I specify js code to update only [link] value?
<div class="fabrikSubElementContainer" id="tk___kiaVlink">
<input type="text" name="tk___kiaVlink[label]" size="200" maxlength="200" class="form-control fabrikinput inputbox fabrikSubElement" placeholder="Label" value="Video">
<input type="text" name="tk___kiaVlink[link]" size="200" maxlength="200" class="form-control fabrikinput inputbox fabrikSubElement" placeholder="URL" value="test value">
I tried using the name tk___kiaVlink[label] and it doesn't work.

const [label, link] = [...document.querySelectorAll('#tk___kiaVlink input')];
[label.value, link.value] = ['my label value', 'my link value'];

Angular 4 sets ng-valid for invalid email input

Angular 4 template driven validation fails. Is this a known issue, or my bug?
Html:
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" required
[(ngModel)]="model.email" name="email" #email="ngModel" #spy>
<div>TODO remove: {{spy.className}}</div>
<div [hidden]="email.valid || email.pristine" class="alert alert-danger">
Valid email is required
</div>
</div>
Component class has property:
model = new SignupModel('','','','');
CSS:
input:invalid:not(.ng-pristine) {
border-left: 5px solid #a94442; /* red */
}
input:valid:not(.ng-pristine) {
border-left: 5px solid #42A948; /* green */
}
When page first loads, you can see email class names: form-control ng-untouched ng-pristine ng-invalid
The alert message is hidden due to email.pristine === true
When user starts typing "aa" the class names change: form-control ng-dirty ng-valid ng-touched
Now the message is hidden due to email.valid === true
However, since "aa" is not a valid email, the left border shows as red via css.
Why does Angular consider email.valid to be true and sets ng-valid class, when the css correctly interprets the input as invalid?
The style class does change to ng-invalid when you remove "aa", correctly interpreting "required" property.

Solution is to add additional "email" attribute to input tag:
<input type="email" class="form-control" id="email" required email
[(ngModel)]="model.email" name="email" #email="ngModel">

how to get value from hidden input with jquery?

i have a any hidden input element. i want get value from a element. but tis code $('#chin').val() return ''. hidden element for keep default value from the cotroller.
my code is:
<input placeholder="تاریخ ورود" class="datepicker" name="from" id="from" value="#Model.FromDate" />
<input ng-model="searchFilters.CheckInDate" name="chin" id="chin" hidden value="#Model.CheckInDate" />
and html is:
<input ng-model="searchFilters.CheckInDate" name="chin" id="chin" hidden="" value="2016/12/21" class="ng-pristine ng-untouched ng-valid ng-empty">
the input has value.
how to get value from this?

You should be using Angular to retrieve that value. It will be in the model (#Model.CheckInDate).

delete hidden input and Instead it use this code:
<input placeholder="تاریخ ورود" class="datepicker" name="from" id="from" value="#Model.FromDate" data-gdate="#Model.CheckInDate" />
add data-gdate="#Model.CheckInDate" into end code.

How to display div id value in form input

I am trying to show JavaScript output value in form input.Bellow my div which output the value.
<div id="geo" class="geolocation_data"></div>
But I want to show in input box. I tried bellow code but not showing any
<input type="text" placeholder="Please type a location" class="form-control input-lg noredius geolocation_data" value="" id="geo">

<input type="text" placeholder="Please type a location" class="form-control input-lg noredius geolocation_data" value="" id="geo">
You should use the below Javascript code to populate the textbox with some value:
document.getElementById("geo").value= Your_variable_containing_the_value;