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

Question

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

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

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

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

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

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