使用ng-i18next进行表单验证错误消息时,AngularJS的翻译存在问题

时间:2018-12-05 08:31:35

标签: angularjs

我正在创建一个演示网页,其中使用angular ng-i18next和bootstrap进行客户端表单验证和本地化。我的问题是我无法使用Angular ng-i18next传递验证错误消息。我想念什么吗? 我请您澄清一下。 这是我的HTML代码:

<div ng-app="myApp" ng-controller="myController">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <form novalidate name="myForm" ng-submit="submitForm()" >
                        <div class="form-group">
                        <label>Username</label>
                        <input type="text" name="username" ng-model="username" ng-minLength="3" ng-maxLength="10" placeholder="type your username" class="form-control" required></input>
                        <p ng-show="myForm.username.$error.$pristine" class="help-block">{{'USERNAME_REQUIRED'|translate}}</p>
                        <p ng-show="myForm.username.$error.minlength" class="help-block">{{'USERNAME_SHORT'|translate}}</p>
                        <p ng-show="myForm.username.$error.maxlength" class="help-block">{{'USERNAME_LONG'|translate}}</p>
                        </div>
                        <div class="form-group">
                        <label>Email</label>
                        <input type="email" name="email" ng-model="email" placeholder="type your valid email" ng-pattern="" class="form-control" required></input>
                        <p ng-show="myForm.email.$error.$pristine" class="help-block">{{'EMAIL_REQUIRED'|translate}}</p>
                        <p ng-show="myForm.email.$error.$pattern" class="help-block">{{'EMAIL_VALID'|translate}}</p>
                        </div>
                        <div class="form-group">
                        <label>Password</label>
                        <input type="password" name="email" ng-model="password" placeholder="type your password" ng-pattern="" class="form-control" required></input>
                        <p ng-show="myForm.password.$error.$pristine" class="help-block">{{'PASSWORD_REQUIRED'|translate}}</p>
                        </div>
                        <div class="form-group">
                        <label>Date of Birth</label>
                        <input type="dob" name="email" ng-model="dob" placeholder="type your valid Date of Birth" ng-pattern="" class="form-control" required></input>
                        <p ng-show="myForm.dob.$error.$pristine" class="help-block">{{'DOB_REQUIRED'|translate}}</p>
                        <p ng-show="myForm.dob.$error.$pattern" class="help-block">{{'VALID_DOB'|translate}}</p>
                        </div>
                        <button type="submit" action="/register" class="btn btn-primary" ng-disabled="myForm.$invalid">Submit</button>
                        <button ng-click='changeLanguage()'> {{'CLICK'|translate}}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

这是我的控制器:

var myApp = angular.module("myApp", ["pascalprecht.translate"]);

                myApp.config(function ($translateProvider) {
                $translateProvider.translations("US_EN", {
                "USERNAME_REQUIRED": "Username is required",
                "USERNAME_SHORT": "Username is too short",
                "USERNAME_LONG": "Username is too long",
                "EMAIL_REQUIRED": "email is required",
                "EMAIL_VALID": "Please enter valid email",
                "PASSWORD_REQUIRED": "password is required",
                "DOB_REQUIRED": "dob is required",
                "VALID_DOB": "Please enter valid Date of Birth",
                "CLICK": "click"


            });
                $translateProvider.translations("SPANISH", {
                "USERNAME_REQUIRED": "Se requiere nombre de usuario",
                "USERNAME_SHORT": "El nombre de usuario es demasiado corto",
                "USERNAME_LONG": "El nombre de usuario es demasiado largo",
                "EMAIL_REQUIRED": "correo electronico es requerido",
                "EMAIL_VALID": "Por favor introduzca un correo electrónico válido",
                "PASSWORD_REQUIRED": "se requiere contraseña",
                "DOB_REQUIRED": "se requiere dob",
                "VALID_DOB": "Por favor, introduzca la fecha de nacimiento válida",
                "CLICK": "click"
            });
            $translateProvider.preferredLanguage("US_EN");
        });

        MultilingualApp.controller("myController", function ($scope, $translate) {
            $scope.changeLanguage = function () {
                var language = $translate.use();
                if (language === "US_EN") {
                    $translate.use("SPANISH");
                } else {
                    $translate.use("US_EN");
                }
            };
        });

请协助。

0 个答案:

没有答案