Develop Reference

AngularJS ng-message directive always showing message

I am trying to set the select field in the view to be required. So I'm having the below tags in my view.html
<form name="homeForm">
<div class="form-group col-md-6 md-padding">
<div>
<label style="font-size: medium">Laboratory Name</label>
<select name="labName" class="form-control" ng-model="request.labName" required>
<option ng-repeat="lab in labList" value="{{lab.id}}">{{lab.value}}</option>
</select>
<div style="color:maroon" ng-messages="homeForm.labName.$error"
ng-if="homeForm.requestTypeName.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
I was hoping the This field is required will show up only when there is no data selected. But irrespective of the field has data or not This field is required shows up like below
Is there something I am missing here

You need to set the same input name in your input and in your ng-message. Doing this, you don't even need to have ng-if. For example:
<form name="form">
<input name="fullname" type="text" ng-model="fullname" required/>
<div ng-messages="form.$submitted && form.fullname.$error">
<p ng-message="required" class="help-block">This field is required</p>
</div>
</form>
In this case I am using form.$submitted. You can remove that, replace it with touched/dirty or whatever. The principle is the same.

The ng-messages directive is in a separate library module and must be included as a dependency.
Example
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-messages/angular-messages.js"></script>
JS
angular.module("app",["ngMessages"])
For more information, see AngularJS ngMessages Module API Reference.

You are using homeForm.requestTypeName in the ng-if, and there is no input control named requestTypeName, i guess you must use homeForm.labName as you use in the ng-message attribute.
Basically, change the ng-if to ng-if="homeForm.labName.$touched"
TL;DR;
You could use as well the homeForm.labName.$error.required for checking if actually the end user has passed away that field without entering some input.
Source: https://docs.angularjs.org/api/ng/directive/ngRequired

apply ng-required if another element is selected

I'm creating an optional part of a form. Once one of the two elements is selected (or text has been entered) the other is required but if there is no input for both these fields are not required. Can I accomplish this with ng-required? If not is there another way? Thanks for the help in advance!
Example Form

You can just do a ng-required with the other model as parameter:
<input ng-model="myFirstInput" />
<input ng-model="mySecondInput"
ng-required="myFirstInput" />
If the first input is filled in, myFirstInput will evaluate to truthy, so the second input will be required.
See this jsfiddle

you can use ng-required directive
<form name="myForm">
Click here to make the input field required:
<input type="checkbox" ng-model="myVar"><br><br>
<input name="myInput" ng-model="myInput" ng-required="myVar">
<h1 ng-if="!myForm.myInput.$valid">The input field cannot be empty</h1>
</form>

ng-required does not work with number input with min condition

I have a checkbox, based on value of its ng-model, I'm toggling visibility of a div using ng-show.
This div contains an <input> of type="number". I have a validation on it of min="10000".
I dont want the form to get submitted if the number input is less than 10000.
However, I want this only to happen when the checkbox is checked.
So, I'm using ng-required to check the value of checkbox.
<input type="checkbox" ng-model="isOn"/>
<div ng-show="isOn">
<input type="number" min="10000" ng-model="counter" ng-required="isOn"/>
</div>
If someone proceeds without touching the checkbox and the input field, the form get submitted.
However, if I click the checkbox, enter a number<10000, and the uncheck it again, the form doesn't get submitted.
On the console I get error that it cannot focus on the the input control.
The ng-required fails to work on the min condition. It is being checked regardless of ng-required.
Is there any way I can get this working?
PS: I dont want to use the solution with text input + length limit + restricted char codes on key press so that only numbers could be typed.

you need to reset the model of the number input field to its initial state as well when user unchecks the checkbox.

I used ng-if instead of ng-show and it worked.
I had tried it before I posted the question, but it didnt work. Later I realized I had done the change on a different html file.

I hope this should work
<form name="MyForm" novalidate >
<input type="checkbox" ng-model="MyForm.isOn" required/>
<div ng-show="MyForm.isOn.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">Please select the checkbox</span>
</div>
<div ng-show="MyForm.isOn">
<input type="text" ng-model="MyForm.counter" required min="1000" />
<div ng-show="MyForm.counter.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">You can't leave this empty</span>
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.min">Value should be atleast 1000</span>
</div>
</div>
</form>

How to get the value of current selected date from calendar eonasdan

I am using http://eonasdan.github.io/bootstrap-datetimepicker/ for calendar. Now I want to pick the selected date by the user. I am stuck with this calendar. Please help me to get the current selected date by the user I have used js to get the value.
On each date there is a class named "day". Now I wanted to get the value of the attribute "data-day" which have the value of the date as follows:
$(".day").click(function(){
var clicked = $(this).attr('id');
alert(clicked);
});
It returns the attribute's value only one time it's not recognizing the second click.
Please help me with js or this eonasdan plugin.

HTML
<br/>
<!-- padding for jsfiddle -->
<div class="row">
<div class="col-md-4 col-xs-6">
<input type="text" class="form-control" id="datetimepicker2" />
<br>
<input type="button" class="btn btn-success" id="getDate" value="Get Date" />
</div>
<span id="SelectedDate"></span>
</div>
JS
$('#datetimepicker2').datetimepicker();
$('#getDate').click(function () {
console.log($('#datetimepicker2').data('date'))
$('#SelectedDate').text($('#datetimepicker2').data('date'))
})
DEMO
Get Only Date Part

I have found methods for calendar described at linked page.
So for example to see what have user entered you have to:
$('#datetimepicker').data("DateTimePicker").date()
input here your id and as result receive object which has '_d' field with value.
data('DateTimePicker')
also has a lot of taste functions to configure plugin.

i think i might have the solution for you.
$('#datetimepicker1').data('date')
Please have a go.

Add Delete link / button to delete input field contents?

I am using an input form with multiple input fields.
These input fields can be pre-populated so I want to give the user an easy option of deleting then with a 'delete' link or button beside the field which deletes the full contents of that input field.
Pressing the delete button will also give them a text confirmation that it has been deleted.
I have attached a jpeg of what I am trying to do
I am using wordpress and gravity forms as my form builder. I am thinking maybe there is a jquery solution to do this but not sure how?
My code for one of my input fields is as follows, the inout fields on my form are all the same code but different id's of course so I did not want to paste everything here just 1 as an exmpale.
<li id="field_15_144" class="gfield">
<label class="gfield_label" for="input_15_144">List</label>
<div class="ginput_container">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="" name="input_144">
</div>
// this would be the link to delete the contents of input field "input_15_144
Delete
</li>
Thanks for any help!

Here, I've added custom ids etc. for the fiddle. You can use it the way you like:
Older: jsFiddle - Lewdh
Edit
To meet newer requirements, some more edits were made.
jsFiddle - Lewdh/4/
HTML Code
<li id="field_15_144" class="gfield">
<label class="gfield_label" for="input_15_144">List</label>
<div class="ginput_container" id="inpContain">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_144" />
<button value="delete">Delete</button><br />
</div>
</li>
<li id="field_15_145" class="gfield">
<label class="gfield_label" for="input_15_145">List</label>
<div class="ginput_container" id="inpContain">
<input id="input_15_145" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_145" />
<button value="delete">Delete</button><br />
</div>
</li>
jQuery Code
$(document).ready(function() {
$("li div button").on('click', function() {
$(this).prev("input").val('');
$(this).parent().append('<span style="color: green;">Success! Your link has been deleted.</span>');
});
});

HTML
<div class="ginput_container">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="www.google.com" name="input_144">
delete <br/>
<span id="msg" style="color:green;"><span>
</div>
Jquery
$('a#delete').click(function(){
$('input#input_15_144').val('');
$('span#msg').html('deleted successfully');
});​
check the demo
You can do the styling as you want. I have created the simple eg which include the functionality you wanted. If you have any problems let me know.

jQuery's val() does what you need. In the above example you could use a function like this.
$('#input_15_144').val('');

Try this
$(function(){
$(".ginput_container").append('delete'); // append a delete link
$('#delete_link').click(function(){
$('#input_15_144').val(''); // set the textfield empty
$(".ginput_container").append('<br><span>Success - Your link has been deleted</span'); // put a success message
});
});
You may apply css for the formatting

Sorry if i misunderstood your question but to reset input type text field, you only need to set its value to empty string:
$('#id').val('');