better custom validation for angular form

Question

I searched, I know 'the directive way' to do custom validation, but it looks like a overkill to me, I hope there is a simpler way, so I tried somwthing like this.

it works, but really not sure it is the right way(or angular way).

.controller('vali', ['$scope', function vali($scope) {

    var th = this

    th.formData = {}

    // watch password repeat
    $scope.$watch(function() {
        return th.password1
    }, function(newPass) {
        if(!customValidate(newPass)) th.form.pass2.$setValidity('custom', false)
        else th.form.pass2.$setValidity('custom', true)
    })

    //custom validate: password repeat must equal to password
    function customValidate(v) {
        if(v === th.formData.password) return true
        else return false
    }

    this.submit = function(form) {
        if(!th.form.$invalid) th.postToServer(th.formData)
    }

    this.postToServer = function(data) {
        //do post to server
        console.log(data)
    }

}])

html:

<div ng-controller='vali as v'>
  <form name='v.form' ng-submit='v.submit'>
    <input type='password' name='pass1' ng-model='v.formData.password' minlength='6' />
    <input type='password' name='pass2' ng-model='v.password1' />

    <div ng-messages='v.form.pass2.$error' ng-if='v.form.pass2.$dirty'>
        <div ng-message='required'>required</div>
        <div ng-message='custom'> not equal</div>
    </div>

    <button type='submit'>submit</button>
  </form>
</div>

yeah, this is better ..

Ramesh Rajendran
– Ramesh Rajendran

2015-04-02 05:57:06 +00:00
Commented Apr 2, 2015 at 5:57 — Ramesh Rajendran
– Ramesh Rajendran, Commented Apr 2, 2015 at 5:57

Himanshu Mittal · Accepted Answer · 2015-04-02 08:34:59Z

2

You don't need to create your own directive for this. There is already a built-in directive for the password validation. You can use that like this :

<input name="password" required ng-model="password">
<input name="confirm_password"
   ui-validate=" '$value==password' "
   ui-validate-watch=" 'password' ">

The input will be valid when the expression in ui-validate is true, so you can have any validation you want by changing the expression.

answered Apr 2, 2015 at 8:34

Himanshu Mittal

8047 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ZHAO Xudong Over a year ago

ui-validate seems just what i need.

Collectives™ on Stack Overflow

better custom validation for angular form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related