Angular formly - 如何显示自定义模板的自定义错误消息答案

【问题标题】：Angular formly - How to show Custom error message for custom templateAngular formly - 如何显示自定义模板的自定义错误消息
【发布时间】：2015-12-23 11:22:46
【问题描述】：

我已经为国际电话号码使用 angular formly 制作了自定义模板。下面是自定义模板的链接。

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

如何使用 angular formly 在我的自定义模板中显示自定义错误消息？

【问题讨论】：

标签： javascript angularjs angular-formly

【解决方案1】：

要使用 ng-message 显示自定义错误消息，请在 app.config 函数中添加以下代码。

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>'
});

现在，将验证包装器添加到自定义模板。

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(' ') });

否则直接在自定义模板中添加验证模板。

希望这个答案对其他人有所帮助。

【讨论】：