ngval icon indicating copy to clipboard operation
ngval copied to clipboard

Only required is working

Open cskiwi opened this issue 11 years ago • 7 comments

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="{&quot;length&quot;:&quot;The Password must be at least 6 characters long.&quot;,&quot;required&quot;:&quot;The Password field is required.&quot;}" 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,

cskiwi avatar Nov 28 '14 14:11 cskiwi

it is a bug. I completely reworked the library : https://github.com/phnx47/aspmvc.ng.val

phnx47 avatar Nov 29 '14 00:11 phnx47

@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 :)

cskiwi avatar Nov 29 '14 11:11 cskiwi

That models is not supported. See MyNgValExtensions.cs

phnx47 avatar Nov 29 '14 11:11 phnx47

@phnx47 Ah now I see, and have you any idea for the wrong error being showed?

cskiwi avatar Nov 29 '14 12:11 cskiwi

@cskiwi I planned it, but I haven't time. You need to add a handler in MyNgValExtensions.cs.

phnx47 avatar Nov 29 '14 12:11 phnx47

@phnx47 Aight no problem. just checking if I was doing something wrong.

For just knowing, is that planned for anytime soon?

cskiwi avatar Nov 29 '14 12:11 cskiwi

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

phnx47 avatar Nov 29 '14 13:11 phnx47