Angular formly - 如何顯示自定義模板的自定義錯誤消息

Question

我已經爲國際電話號碼使用有角度的formly自定義模板。下面是自定義模板的鏈接。

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

如何使用角度formly我的自定義模板顯示自定義錯誤消息？

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

否則直接在自定義模板中添加驗證模板。

希望這個回答對其他人有幫助。