我正在创建一个演示网页,其中使用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");
}
};
});
请协助。