Angular Form Builder Optional Required field - angular2-forms

I want to set a field of a formbuilder become required or un-required based on the option of another field.
For example, If I have 2 options "over 18" or "under 18" and one filed "age".
If I select option "over 18". I have to make the "age" field become required (mandatory).
If I select option "under 18". The "age" field become non-required.
How can I build up that requirement with form-builder? I tried a lot, but nothing works.
Thanks for your support.

I'm not sure if there is a way to do this directly with FormBuilder, but you should be able to accomplish this by binding to [required] in your template input.
<input type='text' formControlName='age' [required]="form.get('over18').value === 'true'">
form being the name of your FormGroup and true being the value of your checkbox/radio input.
Doing this will invalidate your form if over18 field is true and nothing is entered into the age field.

Related

Field not showing in TFS 2017 WebLayout

I have enabled the new work item form in TFS 2017 after upgrading from TFS 2015, but have found that there are some fields that aren't showing in the new work item form, even though I can see the field declared in the WebLayout section when editing the work item type XML. Is there a condition which hides fields in WebLayout?
The field I am trying to get appear is the Microsoft.VSTS.Scheduling.RemainingWork field. I have the following inside the WebLayout:
<WebLayout>
<!- Snipped some other groups which show -->
<Group Label="Timescales">
<!-- Snipped Some other fields which show -->
<Control FieldName="Microsoft.VSTS.Scheduling.RemainingWork" Type="FieldControl" Label="Remaining Work" />
</Group>
</WebLayout>
I also had the same issue with a custom String field, but I no longer needed the field so I removed it anyway.
The field is not shown and declared in Web Layout, you need to double check if the field is hidden or have an invalid value of the field.
In your case, you can edit the work item type to add the REQUIRED role from Remaining Work field when change particular States (such as from Done to In Progress). Please follow the below steps:
Open your work item type using TFS Power Tools in (Process Editor).
Under Workflow tab, find the Transition which from Done to
In Progress, then double click on this Transition.
In Workflow Transition dialog, under Fields tab, add the Remaining
Work field, then click OK button and save your work item type.
As a workaround, when you change the statuses, even though the transition was clearing the Reamining Work filed, still need to enter the value for the field.
So, what I found was that when I changed between 2 particular statuses, the transition was clearing the Remaining Work field value. I'm guessing that the WebLayout doesn't display invalid fields, as a blank string is not a valid Double field, which Remaining Work is defined as

How to show required field validation conditionally from a view

In My MVC 4 application, I have a Multi Select List Box, where I can select multiple values, I also has an Item New Role as one of the list items, which also refers to a model property NewRole.
So using Jquery whenever the user selections contain New Role, I will provide a text box to the user, which is bind to NewRole from model as given,
#Html.TextBoxFor(m => m.NewRole)
Which also has the following evaluation field.
#Html.ValidationMessageFor(m => m.NewRole)
And I will hide this text-box if the user selected options does not has the Item New Role.
Now the problem is even if I hide the div which contain the Text Box, it will try evaluating the required field validation.
What I require is When User Selects New Role and the User did not enter anything in the provided text Box then validate the required field property.
I know I can write a JQuery to show an alert when the div visible and does't has any value. But I want this default validation should happen on that condition.
is it possible?
One of the trick to avid certain client side validation conditionally ... you can use the IGNORE attribute of the validation ...
jQuery Validate Ignore elements with style
$("#myform").validate({
ignore: ":hidden"
});
If this is not what you are looking ... I will provide more specific information
Yes it is possible with RemoteAttribute. Take a look at this article:
http://msdn.microsoft.com/en-us/library/gg508808(v=vs.98).aspx
Keep in mind that this is NOT client side validation meaning there is an actual server post happening.
Try using the rules add and remove, when new role is selected add new rule which validates the textbox on other selection remove the rule from text box and hide it like you are doing:
http://validation.bassistance.de/rules/

Is it possible to have date_select with year text box?

I'm looking to create an ancestry type webpage with a date field that allows user to enter a date going back to thee digits. This makes date_select with dropdown boxes and the jquery datepicker very un-user friendly.
Does anyone know a good way to display a text box for the year but a dropdown for month and day?
I'm hoping to use the "intelligence" of date_select while still allowing the user to enter the year in a more user friendly fashion (the textbox).
Thanks for any help you can give me!
With great respect to the developers of Rails, the date_select usability is pretty weak for almost any case :-)
Unlike other field types, the date_select helper generates three select tags with special names and ids, one each for the year, month, and day elements. It's the naming convention that allows controller code to auto-magically re-assemble the inputs into a (single) date when it is processing the params array.
Sorry, I don't have a handy example of the naming format (since I never use date_select), but if you look at the names of the fields, you might be able to mimic the behavior without too much hackery by using the :discard_year option. That gets you the month and day fields, and a hidden field (I think) containing the current year.
If you're not averse to a little JS or CoffeeScript, you could modify the input field after the DOM is loaded, by removing the hidden "type" attribute (thus making it a simple text field) and setting its value to be empty.
I would choose between three options
1-Use a date_select only for day and month and a text field with some javascript for the year
Date_select accepts a :discard_year option, if you set it to true, the year field is rendered as a hidden_field so there's no select/dropdown http://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-date_select
Then you put a text_field and bind to the keyUp event and modify the value of the hidden year field
The most important problem about this is that, if the user has javascript disabled, the value of the text field will never be set to the hidden field and that's a problem.
2-Use a date_select only for day and month and a text field
I'm not sure if you can do this option, you can try using the same date_select as above and set the name of the input field with the name of the year field. The problem is that date_select will put a hidden field with that name and you put another field with the same name and the value sent on submission may not be what you want... You should see if it's posible.
3-Use a date_select and add extra functionality using Choosen http://harvesthq.github.com/chosen/
Put the date_select as always and set the start_year and end_year that you want, then replace the selects with choosen selects, the choosen select includes a text field to search between the years of the select
Choosen gives you a nice and consistence look almost crossbrowser (didn't test it on old IE versions), you get the text input for user-friendliness and, if javascript is disabled, the user still have the three selects.
I would definitelly use number 3, but maybe you don't want to add a plugin.
Experimenting with the Javascript route suggested by Tom, I came up with something like the following:
<%= f.date_select :birth_date %>
<script>
var date_field =
document.getElementsByName('ancestor[birth_date(1i)]')[0];
var new_html = '<%=
f.text_field 'birth_date(1i)', :value=>(f.object.birth_date.strftime("%Y") rescue "") %>';
date_field.outerHTML = new_html;
</script>
(Improvements welcome)

Trigger validation based on drop down value

I'm working in Struts 2. I want to make two text fields "required" based on the value selected in a drop down. I got so far as making them "required" using js so that the form does not submit anymore when the two fields are empty. Now i want a field error above the text box saying the fields are mandatory. What is the best way to achieve this?

Providing Required Format Information in Text Box in MVC view

How do you set a string to denote the required format pattern in a text box. For instance, if I have a text box displayed such as a date field, how do I display a format of "dd/mm/yyyy" to help the User complete the field. If the field is already populated when the view is displayed then the actual data should be displayed.
If the field is a drop down list, I would like to display "Please select from the list" if the field does not contain a value.
In HTML 5 you can achieve it using Placeholder attribute of input tag like this:
<input name="email" type="email" placeholder="validemail#email.com" />
However HTML5 is not yet supported by most browsers, so you will have to live with javascript based solution. Populate the desired value in textbox when page is loading (you can use CSS to make that text dim). Using javascript empty the field on "onfocus" event.
For drop down list populate "please select..." thing with Value as 0. This way you can validate on server that user has not selected any valid value.

Resources