Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

validators - errors are not shown #15

Open
orenhavshush opened this issue May 27, 2018 · 3 comments
Open

validators - errors are not shown #15

orenhavshush opened this issue May 27, 2018 · 3 comments

Comments

@orenhavshush
Copy link

orenhavshush commented May 27, 2018

I have a field with
validators: { looksOk: function(field, model, next){ next(model[ field.key ].indexOf('@') >= 0); } }
I see that on error the field wrapper is getting the error class but no error is shown below the field,
I have checked the configuration but found nothing on that

update:
I saw now that I can define the error message in the validate function for example:
validators: { minLength: { expression: 'model[field.key].length > 5', message: 'Your password must be at least 6 characters' } }

but I could not get the same functionality for a generic 'required' field

@matt-sanders
Copy link
Contributor

There is a section in the docs around validation messages: https://matt-sanders.gitbooks.io/vue-formly/content/v/2.0/how_to_use/validation.html

Messages are required for an error message to display. You can either add messages on a per-validation basis, or you can add global messages

@andyfensham
Copy link

andyfensham commented Jul 27, 2018

How would one set up a custom template to show the error messages if they occur as per your input template. I am trying to set custom template for all html5 input types e.g. number, date, email etc

Your text input definition looks like below.

{
          key: 'name',
          type: 'input',
          wrapper: '<div class="col-sm-12 col-md-6 col-lg-4"></div>',
          required: true,
          templateOptions: {
            label: 'Text Field',
            type: 'text'
          },
          validators: {
            length: {
              expression: 'model[ field.key ].length > 3',
              message: 'You must enter more than 3 characters'
            }
          } 
        }

If I however change it to my own type as per the below template, the error messages disappear.

<template>
    <div class="form-group formly-input">
        <label>{{to.label}}</label>
        <input class="form-control" :type="to.type" v-model="model[field.key]">
    </div>        
</template>
<script>
//not required but this baseField has a lot of useful stuff already in it, check it out
import baseField from 'vue-formly-bootstrap/src/fields/baseField';
export default {
    mixins: [baseField]
}
</script>

I would think that because I use the base field as a mixin, the validation messages will be added in..or not. Tnx

@matt-sanders
Copy link
Contributor

@andyfensham the error messages display are added in the template, therefore simply extending baseField isn't going to add them in for you. Take a look at this field and this error component

You'll see on the inputField it adds the error-display component right near the end and passes it some params. The error-display component is responsible for rendering those errors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants