Formly fields not showing validaton until user moves out of that field

Question

I'll been using this example in the formly docs, but my question goes for most fields I've made/used in formly

Basically, if, as a user, I have the following flow:

1. I select the IP Address field (see example) for input
2. I type a bunch of nonsense (not an IP)
3. I click/tab away to another field

Formly won't show any errors until step 3. This is often fine.

However, I frequently want show the errors before then in step 2 - i.e., as soon as I enter my first character in that field (let's say "1"), the error ("1 is not a valid IP Address") would show up, and would remain until the field was valid.

I know that this should be possible - if you, for example, do the following:

1. I select the IP Address field (see example) for input
2. I type in a single character ("1")
3. I click/tab away to another field
4. I select the field again, and start typing some more characters ("...234, etc")

In this case, once we return to the field, we see the error updates with every keystroke. However, it doesn't seem to be something you can do out of the box.

So, my question:

• Is there any 'out of the box' way to do this?
• Alternatively, has anyone ever tried to do this themselves?

Thanks!

Answer 1

If you are using the default error code that is found in the examples, you can change ng-if="options.formControl.$touched" to ng-show="options.formControl.$dirty" and it seems to work as you'd like it to.

<!-- Put custom templates here -->
    <script type="text/ng-template" id="my-messages.html">
      <formly-transclude></formly-transclude>
      <div class="my-messages" ng-messages="fc.$error" ng-if="options.formControl.$touched">
        <div class="some-message" ng-message="{{::name}}" ng-repeat="(name, message) in ::options.validation.messages">
          {{message(fc.$viewValue, fc.$modelValue, this)}}
        </div>
      </div>
    </script>