I'm using Angular to create a web app. I have a form with two date inputs:
<label for="date-from">From: </label>
<input class="range-data" type="date" name="date-from" id="date-from" value="">
<label for="date-to">To: </label>
<input class="range-data" type="date" name="date-to" id="date-to" value="">
How to check if two date ranges overlap?
Searching here on SO i have found this answer
<input name="min" type="number" ng-model="field.min"/>
<input name="max" type="number" ng-model="field.max" min=" {{ field.min }}"/>
Do you have any other recommendation?
First, there is not ng-model in your inputs, that is required for the "angular way" of using forms. After that, HTML5 support min and max for dates, when the date need to be supplied in the format of "YYYY-MM-DD". Notice that not all browsers support "date" input.
An optional implementation:
<label for="date-from">From: </label>
<input class="range-data" ng-model="fromDate" type="date" name="date-from" id="date-from" max="{{toDate|date:'yyyy-MM-dd'}}">
<label for="date-to">To: </label>
<input class="range-data" ng-model="toDate" type="date" name="date-to" id="date-to" min="{{fromDate|date:'yyyy-MM-dd'}}">
Related
I'm trying to use Web to Lead functionality of salesforce. I can create a lead, but the Notes field does not get the data I supplied in the form. Here's the form I'm sending:
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="xxxxxxx">
<input type=hidden name="retURL" value="http://www.mycompany.com">
<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
<label for="email">Email</label><input id="email" maxlength="80" name="email" size="20" type="text" /><br>
<label for="company">Company</label><input id="company" maxlength="40" name="company" size="20" type="text" /><br>
Notes:<textarea id="00N6100000C5D5Z" name="00N6100000C5D5Z" type="text" wrap="soft"></textarea><br>
<label for="street">Street</label><textarea name="street"></textarea><br>
<input type="submit" name="submit">
</form>
Every field gets populated in the new lead entry, except Notes. Has anyone ran into this issue? How did you resolve it?
Thanks in advance!
I haven't got why you have specified type="text" with your textarea. Textarea itself is a type.
Can you replace
Notes:<textarea id="00N6100000C5D5Z" name="00N6100000C5D5Z" type="text" wrap="soft"></textarea><br>
With:
Notes:<textarea id="00N6100000C5D5Z" name="00N6100000C5D5Z" wrap="soft"></textarea><br>
Give it a try.
In JQuery I can set value for multiple elements at once in this way:
<form action="" id="mainForm">
<input type="text" name="Phone" class="deftext" value="" >
<input type="text" name="Number" class="deftext" value="" >
<input type="text" name="Name" class="deftext" value="" >
<input type="text" name="Lastname" class="deftext" value="" >
<input type="text" name="Middlename" class="deftext" value="" >
<input type="text" name="Age" class="deftext" value="" >
<input type="text" name="Email" class="deftext" value="" >
<input type="text" name="Occupation" class="deftext" value="" >
</form>
$('#mainForm .deftext').val("hello");
// OR
$('#mainForm input:text').val("");
Are there similar approach in ExtJS 4 to modify the following code into single line?
Ext.getCmp('mainForm').down('[name=Phone]').setValue('');
Ext.getCmp('mainForm').down('[name=Number]').setValue('');
Ext.getCmp('mainForm').down('[name=Name]').setValue('');
....
Your JQuery code is not really readable, because when looking at the function you can't see that there are multiple fields affected. This is why ExtJS does not support such a syntax. Either you use
Ext.getCmp('mainForm').down('[name=Phone]').setValue('');
Ext.getCmp('mainForm').down('[name=Number]').setValue('');
or you use
Ext.getCmp('mainForm').getForm().setValues({
Phone: '',
Number: ''
});
Unlike your JQuery example, both of these are readable, because I don't have to know which classes have been applied to which fields.
If you want to reset all fields to the value that was set during the last form.loadRecord operation, or the initial value if no form.loadRecord operation has been performed, use form.reset:
Ext.getCmp('mainForm').getForm().reset();
Well, if child components get something in common (xtype for example) you can do something like
Ext.getCmp('mainForm').query('textfield').each(function(component){component.setValue('')});
but no, you cant use component methods on array of components.
I have HTML code:
<input type="text" ng-model="name" required>
<input type="text" ng-model="sec_name" required>
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
How I can remove required attribute if user checked input type="checkbox"?
And to come back if unchecked?
It needs for ng-disabled:
<div ng-disabled="form.$invalid">Send form</div>
You can use ng-required, instead of required, so you could set a model on the checkbox for example like
<input type="text" ng-model="name" ng-required="!none">
<input type="text" ng-model="sec_name" ng-required="!none">
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
Here is a working example for you - http://jsfiddle.net/U3pVM/16544/
Use ng-required instead:
<input type="text" ng-model="sec_name" ng-required="none">
That's exactly why ng-required exists.
I have a salesforce web to lead form. Everything seems to be going through to salesforce except the comments textarea box. Any idea why just this field wouldn't work?
The code for the texarea field (there is an actual number in id and name)
<form class="sf-form" id="contact-1"
action="https://www.salesforce.com/servlet/servlet.WebToLead?
encoding=UTF-8" method="POST">
<div class="sf-left">
<label class="sf-label">First Name</label><input class="sf-text"
id="first_name" type="text" maxlength="40" name="first_name"
size="20" />
<label class="sf-label" for="last_name">Last Name</label><input
class="sf-text" id="last_name" type="text" maxlength="80"
name="last_name" size="20" />
<label class="sf-label" for="email">Email</label><input class="sf-
text" id="email" type="text" maxlength="80" name="email" size="20"
/>
<label class="sf-label" for="phone">Phone</label><input
class="sf-text" id="phone" type="text" maxlength="40" name="phone"
size="20" />
<label class="sf-label" for="company">Company</label>
<input class="sf-text" id="company" type="text" maxlength="40"
name="company" size="20" />
</div>
<div class="sf-right">
Comments:<textarea name="000number here" id="same 000number here"
class="sf-textarea" rows="10" type="text" wrap="soft" ></textarea>
<br>
<input type="submit" name="submit" class="sf-submit">
</div>
<div class="clearfix"></div>
</form></div>
In debug mode I am getting the following for the textarea field
xxxxxxxx(some long number here): This is another test to get the debug code(long number here): Whatever I put in comments
I'm not sure if those long numbers have to do with their account, I'm not familiar with salesforce... are they debug codes?
Thanks!
Ahh. Well the client was showing the form to Salesforce (they wouldn't give me access) and I guess it is working now. That must've been the issue, because I haven't changed anything on my end. Thanks for your time! – Beth 2 mins ago
I’m trying to get user.name.length value at error message.
If jQuery is used, it is realizable, but isn't there any method unique to Angularjs?
<form novalidate name="myForm" ng-submit="addUser()">
<p>Name:
<input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="8">
<span ng-show="myForm.name.$error.minlength">{{user.name.length}} too short!</span>
Can you try with {{myForm.name.$viewValue.length}}, like below:
<input type="text" name="name" ng-model="user.name" ng-minlength="5" ng-maxlength="8" />
<span ng-show="myForm.name.$error.minlength">{{myForm.name.$viewValue.length}} too short!</span>
<span ng-show="myForm.name.$error.maxlength">{{myForm.name.$viewValue.length}} too long!</span>
The way ng-minlength and ng-maxlength work, if the input textbox has fewer or more characters than specified by the two directives, then user.name is not populated (I don't even think it is defined). To see what I mean, add {{user.name}} after the <span>.