首页 文章

Angular，ng-messages未在角度材料设计对话框中显示（md-dialog）

提问于
浏览 301 次
8

我正在使用表格在angularJS中添加信用卡，使用角度材料（https://material.angularjs.org/latest/#/） .

对于我的所有其他形式，我使用ng-messages（https://docs.angularjs.org/api/ngMessages/directive/ngMessages）来显示验证错误，并且它工作正常 .

当我在md对话框中嵌入表单时，我的ng-messages没有显示，输入变为无效，但没有显示错误 . 我遇到了基本验证指令和自定义验证指令的问题 .

我的对话框模板：

<md-dialog>
<md-dialog-content style="max-width:800px;max-height:810px; ">
    <h2 i18n="add_card_button"></h2>
    <form name="form">
        <md-input-container>
            <label i18n="card_number"></label>
            <input  name="card_number"
                    type="text" 
                    ng-model="ctrl.newCard.cc_number"
                    class="md-input" 
                    required
                    card-number>
            <div ng-messages="form.card_number.$error">
                <div ng-message="cardNumber">test message</div>
                <div ng-message="required">test message 2</div>
            </div>
        </md-input-container>
        ...
    </form>
</md-dialog-content>
<div class="md-actions" layout="row">           
    <md-button ng-click="">
        <i18n>ok_button</i18n>
    </md-button>
    <md-button ng-click="cancel()" style="margin-right:20px;">
        <i18n>cancel_button</i18n>
    </md-button>
</div>

我的对话框定义：

$mdDialog.show({
            controller : dialogController,
            controllerAs : "ctrl",
            bindToController : true,
            templateUrl : "creditCards/assets/templates/add_credit_card_dialog.html",
            parent : angular.element(document.body),
            targetEvent : event,
            clickOutsiteToClose : true,
            locals : {
                cardTypes : vm.cardTypes
            }
        });

和我的自定义指令定义

angular
    .module('app.core')
    .directive("cardNumber", cardNumber);

/* @ngInject */
function cardNumber () {
    var directive = {
        link: link,
        restrict: 'A',
        require : "ngModel"
    };
    return directive;

    function link(scope, element, attrs, ngModel) {
        ngModel.$validators.cardNumber = cardNumber;

        scope.$watch("cardNumber", function(){
            ngModel.$validate();
        });

        // Validate visa, mastercard, amex, concate new regex to validate more card
        var reg = new RegExp(/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13})$/);

        function cardNumber(modelValue){
            if(!modelValue){
                return true;
            }

            modelValue = modelValue
                            .replace(/-/g, "")
                            .replace(/\s/g, "")
                            .replace(/,/g, "");

            return reg.test(modelValue);
        }
    }
}

以及结果的屏幕截图，您可以在其中看到无效字段但没有错误消息：
enter image description here

angularjs dialog angular-material

6 回答

  • 4

    这里有两个可能的修复：https://github.com/angular/material/issues/8037

    • 确保ng-app指令位于页面的body标签上 .

    • 从$ mdDialog.show（）选项中删除 parent: angular.element(document.body) 行 .

    回复于
  • 3

    尝试一下

    <div ng-messages="form.card_number.$error" md-auto-hide="false">

    这解决了我的类似问题

    回复于
  • 0

    我能够做到这一点 .

    • 将角度消息添加到凉亭和索引

    • 将模块ngMessages添加到您的应用程序

    • 在md-input-container上做了这个

    <md-input-container flex md-is-error="signupForm.emailAddress.$invalid && (signupForm.$submitted || signupForm.emailAddress.$dirty)">
  <label>Email Addresss</label>
  <input name="emailAddress" ng-model="registerInfo.emailAddress" type="email" required/>
  <div ng-messages="signupForm.emailAddress.$error" ng-if='signupForm.$submitted || signupForm.emailAddress.$touched'>
    <div ng-message="required">This is required.</div>
    <div ng-message="email">Enter valid email address.</div>
  </div>
</md-input-container>

    对于自定义指令，我这样做了

    <div ng-messages="signupForm.verify.$error" ng-if='signupForm.verify.$dirty || signupForm.verify.$touched'>
  <div ng-message="required">This is required.</div>
  <div ng-message="passwordVerify">Doesn't Match.</div>
</div>
    回复于
  • 0

    你有两个 form 标签可能吗？
    如果您从Angular站点复制了演示，则可能 form 在 form 内 . 这可能会导致这个问题 .

    回复于
  • 2

    伙计们，我面临同样的问题 . 我的问题是我没有从示例md对话框代码中删除封闭标记 . 这可能会干扰消息 .

    希望对你也有帮助 .

    Abhimanyu

    回复于
  • 6

    我想，你应该捕到错误ng-model form.cc_number.$error ，这里的代码相同：

    <input name="card_number" type="text" class="md-input" card-number required ng-model="ctrl.newCard.cc_number">
<div ng-messages="form.cc_number.$error">
    <div ng-message="cardNumber">test message</div>
    <div ng-message="required">test message 2</div>
</div>
    回复于

相关问题