Only required is working
Hi,
I included your extentions to my project
the ngvalidation is correcly showing up e.g.
<input type="password" class="form-control ng-invalid ng-valid-maxlength ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched" ng-model="registerForm.password" id="password" placeholder="Password" ngval="{"length":"The Password must be at least 6 characters long.","required":"The Password field is required."}" ng-minlength="6" ng-maxlength="100" required="">
but only the required is triggerd
this is the full html of the password
<div class="col-lg-10">
<div class="form-control-wrapper">
<input type="password" class="form-control empty" ng-model="registerForm.confirmPassword" id="confirmPassword" placeholder="Confirm Password" @Html.NgValFor(u => u.ConfirmPassword)><span class="material-input"></span>
</div>
{{registerForm.confirmPassword.hasError}}
<div ng-repeat="err in registerForm.confirmPassword.ngval.errors">
<span>{{err.message}}</span>
<br />
</div>
</div>
any chance you know why?
maybe note: when I press submit the error box is always empty,
it is a bug. I completely reworked the library : https://github.com/phnx47/aspmvc.ng.val
@phnx47 Thanks for the quick reply! Yep that is working better for me.
but there are still a lot of problems with it, i'm trying to make it for a register screen this is the following modelView:
public class RegisterViewModel
{
[Required]
[EmailAddress]
[Display(Name = "Email")]
public string Email { get; set; }
[Required]
[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }
[DataType(DataType.Password)]
[Display(Name = "Confirm password")]
[Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
public string ConfirmPassword { get; set; }
}
And when I do that with the following html:
@using AspMvc.Ng.Val.Extensions
@model AspMvc.Ng.Val.Models.LoginViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div data-ng-app="app" data-ng-controller="Ctrl">
<form name="testForm" novalidate="" data-ngval-submit="submit()">
<input type="text" name="Email" data-ng-model="user.Email" @Html.MyNgValFor(u => u.Email) />
<div data-ng-show="testForm.Email.ngval.showError">
<div data-ng-repeat="err in testForm.Email.ngval.errors">
<span>{{err.message}}</span>
<br />
</div>
</div>
<input type="text" name="Password" data-ng-model="user.Password" @Html.MyNgValFor(u => u.Password) />
<div data-ng-show="testForm.Password.ngval.showError">
<div data-ng-repeat="err in testForm.Password.ngval.errors">
<span>{{err.message}}</span>
<br />
</div>
</div>
<input type="text" name="ConfirmPassword" data-ng-model="user.ConfirmPassword" @Html.MyNgValFor(u => u.ConfirmPassword) />
<div data-ng-show="testForm.ConfirmPassword.ngval.showError">
<div data-ng-repeat="err in testForm.ConfirmPassword.ngval.errors">
<span>{{err.message}}</span>
<br />
</div>
</div>
<input type="submit" />
</form>
</div>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/myngval.js"></script>
<script>
var ngapp = angular.module('app', ['myngval']);
ngapp.controller('Ctrl', function ($scope) {
$scope.user = {};
$scope.submit = function () {
console.log('test');
};
});
</script>
</body>
</html>
It checks the require field for email and password like it should
but it doesn't check if the email is indeed an email (same for password)
And for password it only gives the error:
The Password field is required. instead of saying it must be longer (min length = 6)
and the comapare doesn't work either
any idea what might be going wrong?
Also, I noticed I need to have the name tag in my input fields for it to work properly, but when doing that it's show [object Object] instead of the placeholder
Second Also, when using a checkbox, it wants to require it even when the DataModel doesn't say so.
[Display(Name = "Remember me?")]
public bool RememberMe { get; set; }
Still throws the error: Remember me? is required
But it's a step closer to the final result :)
That models is not supported. See MyNgValExtensions.cs
@phnx47 Ah now I see, and have you any idea for the wrong error being showed?
@cskiwi I planned it, but I haven't time. You need to add a handler in MyNgValExtensions.cs.
@phnx47 Aight no problem. just checking if I was doing something wrong.
For just knowing, is that planned for anytime soon?
@cskiwi I use the library in my project, add features as needed. I tested it a little. In January I will be writing SPA, may be extended functionality.
Thanks for feedback!