How can I determine if a value is currently meeting requiredIf standards?

[afineedge]

https://jsfiddle.net/gr4vodem/3/

The required attribute reflects the success/error state of a field, returning true if the field is filled in and false if it is not. When a field has requiredIf resolving as true, that behavior is maintained. However, if requiredIf resolves as false, both an empty field and a field with data have identical attributes, with required resolving as true even though the field is not required. In addition, whether requiredIf resolves as true or false, the attributes for both fields.

This leaves no obvious way to determine whether a field's requiredIf attribute resolves as true or false. I have a complex form with many fields that are displayed or made required conditionally, so indicators for required fields must display only when needed. Is there a way to determine whether a field currently meets requiredIf standards?

[afineedge]

I fully understand that the example was confusing, but I cannot display functionality that does not exist, and I tried to get as close as possible. Hopefully the following will explain my issue.

I figured out how to get the information I needed through this.$v.field.$params.required.prop(this) in the top-level component, and using this.$v.field.$params.required.prop.call(this.$parent) in any child component. However, this feels like overkill. When one checks this.$v.field on a field with a requiredIf in its validation, it would be helpful to see an isRequired or equivalent attribute when the requiredIf requirements are met.

However, for some reason, I'm unable to replicate this in a JSFiddle without Maximum call stack exceeded errors that appear any time I reference this.$v.text.$params. Here's basically the exact code I'm using locally: https://jsfiddle.net/baeud4oq/6/. I have no idea why every single reference to $params on a validation object breaks it with that error, the first being the line if (typeof validator.$params.required === 'object').

[rrjamesjr]

I faced a similar issue and solved it with a hack similar to what you described. In a mixin I have logic to add an * to a label or in the placeholder of custom components based on if the field is required ` function getText(validation, text, self) { if ( validation && validation.$params.required && typeof text !== 'undefined' ) { if (validation.$params.required.type === 'requiredIf') { let required let callee = self do { try { required = validation.$params.required.prop.call(callee) } catch (e) { console.log(e) } callee = callee.$parent } while ( typeof required === 'undefined' && typeof callee !== 'undefined' && callee != null )

  if (required) {
    return text + ' *'
  }
} else {
  return text + ' *'
}

}

return text }`

It's ugly but it works....but its a terrible solution to catch exceptions walking up the tree until I find the component where the validations are declared. Hope we can get something like this build in ``