Adding error messages to angular-formly

Question

We are using angluar-formly forms to make our forms. However when a user inputs an invalid input we would like for them to have a clear error message. So I have created a validator using expression: and message: however I cannot get the message to show up.

The controllers fields value contains:

             {
                key: 'port',
                defaultValue: 2301,
                type: 'input',
                validators: {
                  isPort: {
                    expression : function(viewValue, modelValue) {
                        var value = modelValue || viewValue;
                        return !value || (/^\d+$/.test(value) && value!='' && value>0 && value<65535);
                      },
                    message: '$viewValue +" is not a valid port"'
                  }
                },
                templateOptions: {
                    type: 'number',
                    required: true,
                    label: 'Port',
                    placeholder: 'Enter Port'
                }
              }

and we call on the fields in our html code:

<formly-form model="execServers" fields="informationFields" form="form2"></formly-form>

However we do not see the error message show up. It does go to red and show invalid just no message.

I have also created a jsbin depicting my problem http://jsbin.com/weyotudoqu/1/edit?html,js,console,output

I am pretty sure I am just missing something simple as I have looked at lots of examples which do this exact thing and have the text show up http://angular-formly.com/#/example/intro/codementor

Insane Rose · Accepted Answer · 2016-04-30 17:33:48Z

1

I think it doesn't show because you don't set to display error in html of input. Like that:

<md-input-container class="md-block">
    <label>{{to.label}}</label>
    <input ng-model="model[options.key]">
    <div class="my-messages" ng-messages="options.formControl.$error" ng-if="options.validation.errorExistsAndShouldBeVisible">
    <div class="error-message" ng-message="{{::name}}" ng-repeat="(name, message) in ::options.validation.messages">
            {{message(options.formControl.$viewValue, options.formControl.$modelValue, this)}}
        </div>
    </div>
</md-input-container>

You can see detail at http://angular-formly.com/#/example/advanced/validators

answered Apr 30, 2016 at 17:33

Insane Rose

1911 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1691282 · Accepted Answer · 2016-03-31 18:43:07Z

0

I was able to get this fixed. I realize I was missing some additional configurations as are outlined in this example http://angular-formly.com/#/example/other/error-summary

answered Mar 31, 2016 at 18:43

user1691282

1192 silver badges15 bronze badges

Collectives™ on Stack Overflow

Adding error messages to angular-formly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related