Add css decoration on valdr-form-group

[jgribonvald]

Is there an easy way to add css class on element in valdr-form-group ?

for example if there is a label for a required input, this should add a css class like ng-valid|invalidvaldr-required to the label to be able to add some style like, bold or a content with a char "*"

[philippd]

The validity classes are automatically added on the valdr-form-group element. You can see here which ones are added to form groups: https://github.com/netceteragroup/valdr#css-to-control-visibility

The state of individual validators is currently not propagated to the form groups. Because a form group might contain multiple inputs and labels I currently see no good solution on form group level for the use case where you want to mark the label of required fields.

What might be possible is to implement a directive called label which requires the form controller. You could then read the for or the name attribute from this label element, get the corresponding form item from the form controller and add a $watch on the $valid flag of the form item. Based on the properties available on the form item it should be easy to add a required class to the label directly.

I will close this issue, since the basic CSS classes needed for most use cases are already there. If more people request such information on the label we might add a solution as described above to valdr.

[philippd]

@jgribonvald if you want to implement such a label directive, have a look at valdrFormItem-directive.js and valdrMessage-directive.js which operate on the <input> elements instead of <label> and also require the form controller to get the form items from.

[philippd]

I'll reopen it, maybe we can add such a feature later. I think highlighting required fields on the label element might be really useful. The question is only if something like this should be enabled by default (each label would add an additional $watch).

We could also implement a more generic approach with a new directive that can be added on any element inside of a form group which adds CSS classes based on the state of some form item.

Something like:

<div valdr-form-group valdr-type="Person">
  <label for="firstName" valdr-class="{validator: 'required', fieldName: 'firstName'}">
  <input type="text" id="firstName" name="firstName" ng-model="model.firstName">
</div>

Where valdr-class would add the class required if this validator is invalid for the field firstName. This would be flexible and only add additional watches where needed. But it would also require a lot of configuration if you wanted to have this as the default behavior on all labels.

Opinions?

[jgribonvald]

In my point of view the lightest way (for the browser) would be the best. But absolutly highlighting required field is really usefull.

Else in an other way, why not adding a property on the label, like valdr-label, that will watch the 'for' property to get the validator type ? in this way you can add easily a css class 'valdr-required'

In waiting I will test your "directive" approach ;)

[philippd]

Note that for each valdr validator a class with it's validity state is also added to the input itself. If all you need is to highlight required fields (and it does not have to be on the label), use the class: ng-invalid-valdr-required. We use this in a project to set the background color for required inputs and it works really well.

[jgribonvald]

My needs are on label, for the input i did all i have to do. But in css a can't add a content on previous tag label, or maybe i don't know how to do the good selector.

[marcelstoer]

You can generate content before the input field but there is currently no way to select the parent of an element in CSS. Hence, you cannot manipulate the style of the label with a CSS class assigned to the input field.