alisabzevari / ngval

ASP.NET MVC validation for AngularJS

ngval

ASP.NET MVC validation for AngularJS.

Getting Started

1.Add data anotations to your entities

public class TestEntity
{
    [Required]
    public string RequiredProperty { get; set; }

    [StringLength(10)]
    public string Length10Property { get; set; }

    [Required]
    [StringLength(10)]
    public string MultipleValidationProperty { get; set; }
}

2.Reference ngval.js to your page

<script src="~/Scripts/ngval.js"></script>

3.Add ngval module to your app module dependencies

var App = angular.module('App', ['ngval']);

4.Use NgValFor Html helper method to insert angularjs directives for validation. It will also add native angularjs directives. And you can use ngval object for error messages and more.

<form name="testForm" novalidate ng-submit="submit()">
    <input type="text" name="username" ng-model="user.name" @Html.NgValFor(u => u.RequiredProperty) />
    {{testForm.username.ngval.hasError}}
    <div ng-repeat="err in testForm.username.ngval.errors">
        <span>{{err.message}}</span>
        <br />
    </div>
    <input type="submit" />
</form>

ngval's Issues

Range is used for length when it should be for values

The Range attribute defines the minimum and maximum values but ngVal treats it as string length restrictions, creating ng-minlength and ng-maxlength attributes.

Where is ngval.js?

I looked at the readme file and it mentions about ngval.js, but i cannot find it?

Am i missing something.

Update : Ok I found it in src\NgVal\NgVal.Tests\Scripts\ngval.js. Any reason to keep it in the test project.

Thanks

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="{&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,

Validators not being rendered properly in Razor

I followed the instructions, and placed the following in my razor page:

@Html.NgValFor(u => u.Note)

However, this was rendered on the page:

ngval='{"required":"The Note field is required."}' required

This form appears on a bootstrap modal, if that makes a different.