angularjs - example - modal angular 6

Mensajes ng angulares que no se muestran dentro del diálogo de diseño de material angular(md-dialog)

Question

Estoy trabajando en un formulario para agregar una tarjeta de crédito en angularJS, con material angular ( https://material.angularjs.org/latest/#/ ).

Para todos mis otros formularios, utilicé ng-messages ( https://docs.angularjs.org/api/ngMessages/directive/ngMessages ) para mostrar los errores de validación, y funcionó bien.

Cuando incrustó el formulario dentro de un diálogo md, mis mensajes ng no se muestran, la entrada no es válida, pero no se muestra ningún error. Tengo el problema con la directiva de validación básica y la directiva de validación personalizada.

Mi plantilla de diálogo:

<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>

Mi definición de diálogo:

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

y mi definición de directiva personalizada

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

Y una captura de pantalla del resultado en la que puede ver el campo no válido pero sin mensaje de error:

Answer 1

Chicos, yo estaba enfrentando el mismo problema. El problema en mi caso era que no había eliminado una etiqueta adjunta del código md-dialog de ejemplo. Eso probablemente estaba interfiriendo con los mensajes.

Espero que te ayude también.

Abhimanyu

Answer 2

Pruébalo con

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

Eso solucionó mi problema similar

Answer 3

Pude hacer que esto funcionara.

1. Agregue mensajes angulares a la glorieta y al índice
2. Agregue el módulo ngMessages a su aplicación
3. En un md-input-container hizo esto

<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>

Y para una directiva personalizada, hice esto

<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>

Answer 4

¿Es posible que tenga dos etiquetas de form ?
si copió las demos del sitio Angular, puede tener el form dentro del form . esto puede causar este problema exacto.

Answer 5

Hay dos soluciones posibles detalladas aquí: https://github.com/angular/material/issues/8037

1. Asegúrese de que la directiva ng-app se encuentre en la etiqueta del cuerpo de su página.

2. Elimine la línea parent: angular.element(document.body) de sus opciones $ mdDialog.show ().

Answer 6

Creo que deberías detectar el error ng-model form.cc_number.$error , el mismo código aquí:

<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>