角度正式-如何显示自定义模板的自定义错误消息

Question

I have made custom template using angular formly for international phone numbers.Below is link for custom template.

http://jsbin.com/tizuteyeke/edit?html,output

How to show custom error message in my custom template using angular formly?

Answer 1

To show custom error message using ng-message add below code in app.config function.

formlyConfigProvider.setWrapper({
  name: 'validation',
  types: ['input'],
  template:'<formly-transclude></formly-transclude><div ng-messages="fc.$error" ng-if="form.$submitted || options.formControl.$touched" class="error-messages"><div ng-message="{{ ::name }}" ng-repeat="(name, message) in ::options.validation.messages" class="message">{{ message(fc.$viewValue, fc.$modelValue, this)}}</div></div>'
});

Now, add the validation wrapper to custom template.

formlyConfigProvider.setType({
  name: 'internationalContacts',
  extends: 'input',
  wrapper: ['bootstrapHasError','validation'],/* Add Wrapper*/
  template: ['<label for="{{::id}}" class="control-label">',
             '{{to.label}} {{to.required ? "*" : ""}} {{  options.key }} ',
             '</label>',
             '<input type="text" name="{{::id}}" ng-model="model[options.key]" default-country="in" class="form-control"    international-contacts-options="to.internationalContactsOptions" international-phone-number>',
             '<div class="col-lg-1" ng-hide="true">',
             '<formly-transclude></formly-transclude>',
             '</div>'
            ].join(' ') });

Otherwise add validation template directly in custom template.

Hope this answer will help other.