We Keep Coding

Not able to find the value of a textbox from DOM

I have the below input tag for a textbox. The value is getting displayed in
UI but I am not able to retrieve it from DOM. Any suggestions how we can extract the value from the below tag
<input id="f_aDE8F92F6A8E345D19EB6A819D317DFA89AF_3_1"
class="x-form-text x-form-field dct-field x_normalBG x-form-focus"
size="14"
autocomplete="off"
fieldref="ClientConsiderationsAL.LinesOfInsuranceOfTheClientWithABC"
objectref="aDE8F92F6A8E345D19EB6A819D317DFA8" maxlength="14"
name="int_9AF" title="" type="text"/>

If you're using angularjs add ng-model="relevant-name" to the input and in the controller add $scope.relevant-name as a variable to bind to like this: https://www.w3schools.com/angular/angular_model.asp
If it's just javascript then you need to do something like this:
https://plnkr.co/edit/wU13Bnd6j3TRfYcNV9ZG?p=preview
<input id="f_aDE8F92F6A8E345D19EB6A819D317DFA89AF_3_1"
class="x-form-text x-form-field dct-field x_normalBG x-form-focus"
size="14"
autocomplete="off"
fieldref="ClientConsiderationsAL.LinesOfInsuranceOfTheClientWithABC"
objectref="aDE8F92F6A8E345D19EB6A819D317DFA8" maxlength="14"
name="int_9AF" title="" type="text" onkeyup="textChanged()"/>
<script>
function textChanged() {
var input =
document.getElementById('f_aDE8F92F6A8E345D19EB6A819D317DFA89AF_3_1');
console.log(input.value);
}
</script>

Javascript AngularJs (NG1) If ng-model value is null

I am using AngularJs (Angular1) in a project and I have an ng-model which gets a value:
<input id="myinput" type="text" class="form-control" ng-model="ctrl.myDate" ng-required="true" />
This works fine as far as ctrl.myDate is not null be breaks the code when it's null
Is there a way where I can check if the value is null and add (for example) today's date if it's null, so it doesn't break?
How can I do this?

<input ng-if="ctrl.myDate" id="myinput" type="text" class="form-control" ng-
model="ctrl.myDate" ng-required="true" />
<!-- default date when myDate is null -->
<input ng-if="!ctrl.myDate" id="myinput" type="text" class="form-control" ng-
model="ctrl.defaultDate" ng-required="true" />
You can store a defaultDate in the $scope.ctrl.

1) Supposing that ctrl.myDate is null, then it is probably initialized somewhere in your controller. Based upon that, the right place to replace the model value is your controller and not the view.
So in this case your code might look something like this:
function setDate() {
const today = new Date();
vm.myDate = getDate() || today; // If date is null then assign today.
}
function getDate() { //This might be an http call that brings the date.
return null;
}
2) On the other hand if your model is just for presentation purpose you can do something like this using ng-value directive, but there is probably no reason to use input tag.
<input id="myinput" type="text" class="form-control" ng-value="ctrl.myDate || ctrl.today" ng-required="true" />
Here's a working sample based on your question.

Can you move the condition to where you controller is initialized rather than in the ng-model? e.g. ng-init?
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
var testController = this;
testController.init = function (dateInput) {
if (dateInput !== null) {
testController.myDate = dateInput !== null ? dateInput : getDate();
}
};
}]);
and
<div ng-controller="TestController as ctrl" ng-init="ctrl.init(yourDate)">
<input id="myinput" type="text" class="form-control" ng-model="ctrl.myDate" ng-required="true" />
</div>

AngularJs DatePicker - calendar dropdown doesn't react to model change

I'm using AngularJs datepicker and being stuck at this problem for a while now.
In my app, users can use the datepicker's calendar to select date, or they can click "This Month" to automatically set the date to this month.
Clicking on This Month button will activate a model change in the controller, just like this:
if (when == 'this_month') {
$scope.date_from = Date.today().moveToFirstDayOfMonth().toString('dd-MM-yyyy');
$scope.date_to = Date.today().moveToLastDayOfMonth().toString('dd-MM-yyyy');
}
The HTML
<input name="date_from" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">
<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">
It works just fine for everything: the date gets changed, the text input shows this month's date, etc.
However, the only thing wrong is the calendar itself not being up-to-date with the date change (i.e. still showing the view of whatever the month it was selected before that)
For example, in this screenshot, when clicking on "Last Month", the calendar still shows This Month view.
How should I tap into the DatePicker's calendar then?

HTML
<input name="date_from" ng-change = getDateFrom(date_from) placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">
<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" ng-change=getDateTo(date_to) data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">
Angular JS
$scope.getDateTo = function (date_to) {
$scope.dateTo = date_to;
console.log(date_to);
}
$scope.getDatefrom = function (date_from) {
$scope.dateFrom = date_from;
console.log(date_from);
}
Other way
$scope.$watch('date_form', function (date_form) {
$scope.dateForm = date_form;
});
$scope.$watch('date_to', function (date_to) {
$scope.dateTo = date_to;
});

Set ng-model value to button click

I have this little snippet of code to set the root.lowWeight and root.highWeight to my controller.
<input type="number" placeholder="Enter Low Range..." class="form-control input-xs">
<input type="number" placeholder="Enter High Range..." class="form-control input-xs">
<button class="btn btn-primary" ng-click="assignWeights()">Select Model</button>
Controller model:
//set the initial root scope to empty object
$scope.root = {};
//define root weight
$scope.root.lowWeight = 0;
$scope.root.highWeight = 0;
I know I could just use ng-model="root.lowWeight" to set the value, but ng-model triggers on element input event.
How can I either:
a) Send the input values in via assignWeights(param1, param2)
b) Change ng-model to trigger input on button click (seems hacky, less preferred solution)
I also know I could use JS/jQuery to trigger the input event and block the input event, but that's a last ditch effort I will 99.9% not do.

Solution using seperate scope object: plunkr
Html:
Low: <input type="text" name="lowRange" ng-model="inputData.lowWeight">
High: <input type="text" name="highRange" ng-model="inputData.highWeight">
Js:
$scope.assignWeights = function() {
$scope.lowWeight = $scope.inputData.lowWeight;
$scope.highWeight = $scope.inputData.highWeight
}

In your assignWeights function, you could use a selector to retrieve the values of the inputs and then assign your scope variable values based on that. Just assign a name to each input.
E.g.
<input type="number" placeholder="Enter Low Range..." class="form-control input-xs" name="lowRange">
<input type="number" placeholder="Enter High Range..." class="form-control input-xs" name="highRange">
<button class="btn btn-primary" ng-click="assignWeights()">Select Model</button>
Controller:
$scope.assignWeights = function() {
$scope.root.lowWeight = document.querySelector('input[name="lowRange"]').value
$scope.root.highWeight = document.querySelect('input[name="highRange"]').value
}
Plunker: http://plnkr.co/edit/lm8GFA0CD0zWwgAMSLah?p=preview

ng-pattern not functioning in AngularJS

<label for="updateInterval" class="control-label" for="UpdateInterval">Select Interval</label>
<input name="intervalRange" id="intervalRange" ng-pattern="" type="number" class="form-control input-medium fld-updateinterval-val" placeholder="" ng-model="update_interval" ng-required="true" >
<select class="form-control input-medium sampleForm-combo" onchange="changetextbox(this.value)" id="action" ng-model="update_intervalSelect" ng-required="true">
<option></option>
<option value="days">days</option>
<option value="hours">hours</option>
</select>
Above I have an input box and a dropdown list where the value being inputted in the first text box depends on the value being chosen in at the dropdown list. The JavaScript is reading it well, but my problem is that ng-pattern is not functioning, and I don't know why. If I check it in Firebug, it is being shown that ng-pattern is placed into the textbox, but I'm not sure why I am still able to input numbers that are not within the range I have specified.
function changetextbox(interval)
{
if(interval == "days"){
$(".fld-updateinterval-val").attr("placeholder", "1-365");
$(".fld-updateinterval-val").attr("ng-pattern", "/\\b([1-9][0-9]?|[12][0-9]{2}|3[0-5][0-9]|36[0-5])\\b/");
}
else if (interval == "hours"){
$(".fld-updateinterval-val").attr("placeholder", "1-8760");
$(".fld-updateinterval-val").attr("ng-pattern", "/\\b([1-9][0-9]{0,2}|[1-7][0-9]{3}|8[0-6][0-9]{2}|87[0-5][0-9]|8760)\\b/");
}

Just adding ng-pattern as an attribute to input tag or changing it like above wont work. It requires to compile the element by $compile service in order to work properly.
Another simple way of achieving above thing is bind with some scope variable.
angular.module('textInputExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.example = {
text: 'guest',
word: /[a-z]/,
changengpattern: function() {
this.word = /[0-9]/;
}
};
}
]);
HTML
<form name="myForm" ng-controller="ExampleController">
Single word:
<input type="text" name="input" ng-model="example.text" ng-pattern="example.word" required ng-trim="false">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.pattern">
Single word only!</span>
<tt>text = {{example.text}}</tt>
<br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt>
<br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt>
<br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt>
<br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt>
<br/>
<input type="button" value="click me to change ng pattern" ng-click="example.changengpattern()" />
</form>
Here is working fiddle for you

I had the same issues until I found out, that angular needs both starting and string-end tag within your regex.
Your examples then would look like:
$(".fld-updateinterval-val").attr("ng-pattern", "/^\\b([1-9][0-9]?|[12][0-9]{2}|3[0-5][0-9]|36[0-5])\\b$/");
$(".fld-updateinterval-val").attr("ng-pattern", "/^\\b([1-9][0-9]{0,2}|[1-7][0-9]{3}|8[0-6][0-9]{2}|87[0-5][0-9]|8760)\\b$/");
Pay attention to the pattern string starting with /^ and finishing up with $/. This solved my issues with custom ng-patterns.

ng-pattern= "/^([0-9][0-9]{0,2}|[1-7][0-9]{3}|8[0-6][0-9]{2}|87[0-5][0-9]\d|8760)$/"

provide the regex ("/\\b([1-9][0-9]?|[12][0-9]{2}|3[0-5][0-9]|36[0-5])\\b/") into the input where inside the ng-pattern.
For example,
ng-pattern="/\\b([1-9][0-9]?|[12][0-9]{2}|3[0-5][0-9]|36[0-5])\\b/"
It Worked for me....