Suppose we're building an address book application (contrived example) with AngularJS.
We have a form for contacts that has inputs for email and phone number, and we want to require one or the other, but not both: We only want the email input to be required if the phone input is empty or invalid, and vice versa.
Angular has a required directive, but it's not clear from the documentation how to use it in this case. So how can we conditionally require a form field? Write a custom directive?
There's no need to write a custom directive. Angular's documentation is good but not complete. In fact, there is a directive called ngRequired, that takes an Angular expression.
<input type='email'
name='email'
ng-model='contact.email'
placeholder='your#email.com'
ng-required='!contact.phone' />
<input type='text'
ng-model='contact.phone'
placeholder='(xxx) xxx-xxxx'
ng-required='!contact.email' />
Here's a more complete example: http://jsfiddle.net/uptnx/1/
if you want put a input required if other is written:
<input type='text'
name='name'
ng-model='person.name'/>
<input type='text'
ng-model='person.lastname'
ng-required='person.name' />
Regards.
For Angular2
<input type='email'
[(ngModel)]='contact.email'
[required]='!contact.phone' >
Simple you can use angular validation like :
<input type='text'
name='name'
ng-model='person.name'
ng-required='!person.lastname'/>
<input type='text'
name='lastname'
ng-model='person.lastname'
ng-required='!person.name' />
You can now fill the value in only one text field. Either you can fill name or lastname. In this way you can use conditional required fill in AngularJs.
In AngularJS (version 1.x), there is a build-in directive ngRequired
<input type='email'
name='email'
ng-model='user.email'
placeholder='your#email.com'
ng-required='!user.phone' />
<input type='text'
ng-model='user.phone'
placeholder='(xxx) xxx-xxxx'
ng-required='!user.email' />
In Angular2 or above
<input type='email'
name='email'
[(ngModel)]='user.email'
placeholder='your#email.com'
[required]='!user.phone' />
<input type='text'
[(ngModel)]='user.phone'
placeholder='(xxx) xxx-xxxx'
[required]='!user.email' />
For Angular 2
<input [(ngModel)]='email' [required]='!phone' />
<input [(ngModel)]='phone' [required]='!email' />
Related
I have a Wicket page with this structure:
<form wicket:id="generalForm" method="post" class="form_recherche">
<input value="" type="text" wicket:id="myField_1" />
<form wicket:id="innerForm" method="post">
<input value="" type="text" wicket:id="myField_2"/>
<input type="submit" class="button-classic" wicket:id="accept_2"/>
</form>
<input type="submit" class="button-classic" wicket:id="accept_1" />
</form>
1 external form with 1 inner form. One field each. The fact is that when the "accept_2" button is clicked, the field "myField_1" is not submitted to the server (only the "myField_2" is submitted). And in fact, I would need the "field_1" field to do some validation.
What am I missing and why isn't the "myField_1" being filled on the server why "accept_2" is clicked?
You need to override Form#wantSubmitOnNestedFormSubmit() on the outer Form to return true. This way you will tell Wicket that you want the (outer) form to be submitted as well when one of its nested forms is submitted.
You used SO tags wicket-1.5 and wicket-1.6. I am not sure whether this method is available for your version of Wicket.
Using MechanicalSoup, does one have to set values for hidden fields in a form as well? Or can we just ignore them?
Here is their code in the HTML form:
<input type="hidden" name="details[sid]" />
<input type="hidden" name="details[page_num]" value="1" />
<input type="hidden" name="details[page_count]" value="1" />
<input type="hidden" name="details[finished]" value="0" />
<input type="hidden" name="form_build_id" value="form-OoBDi0_aQvgHZN-Iyc" />
<input type="hidden" name="form_id" value="webform_client_form_337" />
<input type="hidden" name="honeypot_time" value="1519679330|-x8kCHBe6qh7E" />
Hidden fields are typically used internally by the website you're browsing: they are generated with a value, and this value is sent together with non-hidden fields when you submit the form.
MechanicalSoup does what you expect here: it sends the values of hidden fields when you submit the form, so essentially you don't have to care about them: their value will be set by the website you're visiting, and then taken into account by MechanicalSoup just like a normal browser.
You shouldn't need to modify their value, because when using the website with a real browser, the user has no simple way to set a value (that's the point of hiding the fields ...).
You can add your own hidden input name:value pairs using the new_control() method. I've had to do this when the form used javascript to set a hidden element before form submission.
browser.new_control('hidden','name','value')
https://mechanicalsoup.readthedocs.io/en/stable/mechanicalsoup.html#mechanicalsoup.Form.new_control
When the following code is added to a partial HTML class in TYPO3.
<f:form.checkbox id="myCheckBox" property="myCheckBox" value="Y" multiple="no" />
When the form is loaded within a TYPO3 extension the following code is generated for the checkbox
<input type="hidden" name="form[newForm][myCheckBox]" value="" />
<input id="myCheckBox" type="checkbox" name="form[newForm][myCheckBox]" value="Yes" />
Is there a way of adding the parameter ID to the auto generated hidden field so we have:
<input type="hidden" id="myCheckBoxHidden" name="form[newForm][myCheckBox]" value="" />
<input id="myCheckBox" type="checkbox" name="form[newForm][myCheckBox]" value="Yes" />
Using TYPO3 7.6.13
I think you could extend the CheckboxViewHelper and add the id attribute as you needed, and then use your new VH instead.
I have 2 forms on one page that I need to pass to the same page to assemble a pdf. How can I do that? I have tried using a action="post" for one and action="get" for the other, but I can't get that to work. I have tried assigning one form to session variables, but I can't get that either. Any suggestions??
<form name="formOne" id="formOne" method="post" action="#buildURL('goTothisPage.page')#">
<input name="name" id="name" autofocus="true" >
<input name="address" id="address" >
I would try just creating one big form instead of 2 smaller forms if the action is going to be the same and go to the same .cfm page. (Just expand the scope of your tags)
You can also create 2 "Submit" buttons (1 for each form) to make it appear as 2 separate forms, even though the buttons will submit the same form.
If it is required to have two separate forms in your html, it is also possible to forge the form values from one form into the other at the moment of the submit event.
HTML:
<form name="formOne" id="formOne" method="post">
<input name="name" id="name" type="text" >
<input name="address" id="addressHidden" type="hidden">
</form>
<form name="formTwo" id="formTwo" method="post">
<input name="address" id="address" type="text">
<input name="name" id="nameHidden" type="hidden" >
</form>
Javascript:
$(document).ready(function(){
$('#formOne').submit(function(event){
$('#addressHidden').val($('#address').val());
return true;
});
// same for #formTwo
$('#formTwo').submit(function(event){
$('#nameHidden').val($('#name').val());
return true;
});
});
i found a strange behavior in my JSP site and hope somebody have a good advice for me:
JSP-Code:
<c:forEach items="${info.moneyList}" var="mmRoles" varStatus="uStatus" >
....
<div class="paperback" id="delete_${uStatus.index}">
<form id="deleteMoneyMarketSpread_${uStatus.index}"
action="deleteMoneyMarketSpread" method="post">
<input type="hidden" name="currency"
value="${mmRoles.currency}" />
<input type="hidden" name="loan"
value="${mmRoles.loan}" />
<input type="hidden" name="lcfspread"
value="${mmRoles.lcfspread}" />
</form>
</div>
....
</c:forEach>
I generate a form element with hidden input fields in a forEach loop. The interesting point is that (only) in the first iteration no form element will be created. When i check the HTML code with Firebug i only find the hidden input fields, but no surrounding form tag.
HTML code:
<!-- first iteration -->
<div id="delete_0" class="paperback">
<input type="hidden" value="EUR" name="currency">
<input type="hidden" value="true" name="loan">
<input type="hidden" value="123.0" name="lcfspread">
</div>
...
<!-- second iteration -->
<div id="delete_1" class="paperback">
<form id="deleteMoneyMarketSpread_1" method="post" action="deleteMoneyMarketSpread">
<input type="hidden" value="FGH" name="currency">
<input type="hidden" value="true" name="loan">
<input type="hidden" value="1.0" name="lcfspread">
</form>
</div>
Have anyone an idea why this happens?
Regards
Sascha
I still don't found a solution or a reason for this so i used a workaround an create my Form on demand with javaScript when clicking the icon. Not the best way but it works.