Only Validate Visible Fields

[Thomas Inman]

What options are open to me to only validate visible fields?

You can see in the following example that the second text input is hidden by ng-show but it's validation is still impacting myForm.$valid etc.

http://embed.plnkr.co/7h9Ues5CwzaUEFcDNfSm

I'm after a way to not include the second text inputs validation in my form validation.

Cheers

[Thomas Inman]

I thought possibly I could use the ability to pass a boolean to the required directive.

However I would want to do something like

required="{{isVisible($element}}"

to hit a method on the controller like

$scope.isVisible = function(element){

  return element.is(":visible");

}

which a. doesn't work as there's no $element, $event, etc. for required

and b. isn't very angular

So I'm thinking I'm going to need to override the core validation function in angular at some point?

Any ideas?

[Antonello Pasella]

Try using ngdisabled with the same ngshow test.

Disabled elements wouldn't validated

Antonello

[Thomas Inman]

That doesn't work.

For one I would need to negate the tests which adds quite a bit more complexity as the tests for ng-show work nicely with undefined/null values.

http://embed.plnkr.co/RFFTDcVdLD9xh7ATG2bC

Secondly you can't disable blocks of inputs with one ng-disabled

http://embed.plnkr.co/iJOEydqo4Rz5R26dKKxK

Thirdly disabled elements are still validated

http://embed.plnkr.co/9JVsfJ9pL32vMXXyPVkA

[Jon Parkinson]

Hi Thomas

Personally, I use the ui-if directive from the Angular UI framework. It removes the element from the DOM, so there isn't anything to validate against. 

The other way, is to use ng-required as part of the input directive - where you would pass in the same condition you use for ng-show.

Hope that helps.

Jon

[Thomas Inman]

Hi Jon,

I'd just started implementing your second suggestion when this popped up. It seemed to be working but was obviously more work and a bit untidy. 

ui-if sounds exactly what I'm looking for, I had forgotten about that one. I'll give it a go as soon as github comes back from the dead and I can get a new angular ui build.

Cheers

Thomas

[Thomas Inman]

Yup, works perfectly. Cheers Jon

[Dennis Loewel]

Using ui-if may the better solution cause it gets removed from DOM. But I tried something with you plnkr here without angularUI:

http://embed.plnkr.co/oQRY4eZeBjnwbjIuTA5n/preview

It seems that it triggers right when 'required' become true, but not if it then becomes false. But if 'required' becomes 'null', everything is okay.

Another thing is to care about any value written to 'input 2', because I think it is still part of the form even it is hidden and will be used for the result.