thesharpieone / angular-validation-match Goto Github PK

In general, emails are case insensitive. So the directive is failing in this case. Actually this is not a bug. Can we enhance the directive behavior by allowing the user to set an attribute like case-sensitive-match = true or false.

I have the following html
<input id="passwordConfirm" name="passwordConfirm" type="password" data-ng-model="user.confirmPassword" data-match="user.password" placeholder="{{'password'|i18n}}" class="form-control input-md" required>

in the controller i want to reset the value of the field so
i tried

$scope.user.confirmPassword = ''
and
$scope.user.password = ''
Nothing happens however the expected result would be to the input be cleared

When i remove the data-match directive everything works as expected

I am not able to get number input types to match.
To see a working example use the fiddle out of the README file and change the input types from password to number it will not work.

Hi.

Than you for your code!

I was wondering if there is another way of doing the same in Angular.js 1.3, where there is $validators used and the validation result is a boolean returned from the validator function?

Will the code be the same? (it works as is)

Thank you

Hi,

when you compare two input fields of type "email", the validator returns false when both values are the same. You have to enter a valid email adress to get the correct result.

I made a quick plunk here: http://plnkr.co/edit/gS7ytb

It's not a big thing, since you want to have valid email adresses but it's still dirty to let this bug open.

Edit:
This error occurs also on other input types, when the input control in data-match has other failed validations, such like "minlength" for example.

Edit²:
Sorry, duplicate of #5

The directive is not working for email type fields. I have already risen an issue for this. The issue number is #19. But unfortunately, the issue is closed with any solution. Can you look into this issue #19 ?

When using validators such as minlength if the value is invalid then it doesn't make it in to the bound model.

For example:

<input type="password" id="inputPassword1" class="form-control" placeholder="Password" name='password1' 
                        ng-model="user.password1" minlength="7">
<input type="password" id="inputPassword2" class="form-control" placeholder="Password" name='password2' 
                        ng-model="user.password2" required data-match="user.password1" >
<pre>form = {{user | json}}</pre>

If password1 is less then 7 characters then the model won't contain a password1 field.

However with angular-input-match the password2 always reflects the value of the field even if it is invalid.

This directive was originally something small and simple and I just put it on github. Seems like it is gaining some sort of small popularity... Anyways.. It needs to be cleaned up and put as a stand-alone module that can be downloaded (via bower) and injected into an angular project as a dependancy.

Putting this here as a reminder to myself, but if someone else wants to jump on it, PRs are welcome.

p.s. Not to sure the best way to go about bower... there is a specific branch for angular 1.3.x, but it will not work with 1.2.x, how does that work with bower to make sure the person get the right version?

--Edit-- Non-issue

From the bower.json file

"dependencies": {
        "angular": ">=1.2.0 <2.0.0"
    },

https://github.com/TheSharpieOne/angular-validation-match/blob/master/bower.json#L36

From my understanding, this will cause issues with bower if you're using a version of angular > 1.2 - I'm not aware of any compatibility issues with 1.3, is there any reason for this?

Cheers!

When plugin used with ui bootstrap typeahead
occures warning: Match validation requires ngModel to be on the element.

Check example (ui.bootstrap#0.13.4, validation.match#1.5.2)

it would be really nice to allow different types of matching to be implemented - e.g. one field less then another, end date after start date, etc.
a factory could be provided which accepts a matching function and returns new directive definition
client code could look like

app.config(function(inputMatchFactory) {
  app.directive('endDateAfterStartDate', inputMatchFactory(function(myVal, otherVal){
    return myVal.getTime() > otherVal.getTime();
  })
})

Hi,

I am facing issue with $error.parse. Doesn't matter whether I pass model value or form value object (viewValue) to match. Sometimes I am left with {parse: true} in $errors. Even though all other validations have passed. And also element is classed with ng-invalid-parse.

I am using 1.3.9 can confirm same issue with 1.3.8 too.

Interestingly I don't get this issue when using angular provided type validators like email.

Thanks.

The directive is not working properly for email type input fields.

Please open this fiddler http://jsfiddle.net/352brrj2/
Steps to reproduce:

1. Enter "xyz" email field.
2. Enter "xyz" in confirm email field.
3. Go back to email field and change value to "[email protected]"
4. Continue changing the value entered in email field.

Output:
You can see that after step3, the validation message of confirm email field is getting cleared, which should not. Also you can see that, on entering characters in email field, the validation gets applied to compare field on and off.

I tried to combine validation-match with other default validators. (minlegth)
For example: password should be longer then 8 chars.
If you try to fill "123" into password and confirm password input, you'll see "Passwords do not match!", but it equal.
Sample http://jsfiddle.net/5oy3mj1q/1/

Hello,

Your exemple does'nt work when you replace angular.min.js to angular.min.js (v1.4.8)

Thank

What do you think about implementing this feature (the opposite) ?
For instance:

firstname: <input ng-model="user.firstname" type="text" />
lastname: <input ng-model="user.lastname" type="text" match="!user.firstname" />

I know it's not possible with the code today

Example fields:
<input ng-model="user.password" type="password">
<input ng-model="user.checkpassword" type="password" match="user.password">
If I enter data in user.checkpassword and then remove it again (making it an invalid match for a small time), it will remain unmatched. The fields do not match any longer even though they are both empty.

Example input fields:
<input ng-model="user.password" type="password">
<input ng-model="user.checkpassword" type="password" match="user.password">
When I put something in user.password, user.checkpassword will still have ng-valid-match instead of ng-invalid-match.
I think the match only becomes invalid when user.checkpassword is dirty, but it should become invalid when user.password is dirty (and they do not match of course).

Hi,

Hopefully a quick question.

I only want to validate for a match if my first input has a value. Does angular-validation-match have a way to conditionally validate matches? Maybe something similar to ng-required?

<input name="txtSearchTitle" class="form-control" ng-model="SearchTitle" />
<input name="txtConfirmNewTitle" class="form-control" ng-model="SearchTitleConfirmation" ng-required="SearchTitle" match="SearchTitle"/>

<p class="help-block" ng-show="frmJobList.txtConfirmNewTitle.$error.required && submitted">Please enter a value</p>
<p class="help-block" ng-show="frmJobList.txtConfirmNewTitle.$error.match && submitted">Confirmation must match entered search title.</p>

The typeahead directive from angular-bootstrap uses the match attribute which causes this directive to be evaluated resulting in the following warning in console: Match validation requires ngModel to be on the element.

It's not a big deal, but I think it's better to avoid potential problems in the future since angular-bootstrap is widely used.

            <div class="form-group has-feedback" ng-class="{'has-error': enterRecitalForm.recitalCode.$error.required && !enterRecitalForm.recitalCode.$pristine}">
                <div class="col-xs-12 col-sm-offset-1 col-sm-10">
                    <i class="glyphicon glyphicon-pencil form-control-feedback"></i>
                    <input type="text" class="form-control" id="recitalCode" name="recitalCode" 
                           placeholder="Enter Recital Code*" match ="crc" not-match="true" ng-model="recitalCode" required>
                    <span ng-show="enterRecitalForm.recitalCode.$error.required && !enterRecitalForm.recitalCode.$pristine" class="help=block error">Enter Recital Code</span>
                </div>
            </div>

It works at form level the form becomes invald
except
could not figure out how to display a customer span error I tried
Recital code must not match existing Code!
but did not work
is there a solution
Regards

Please, modify bower.json, in the option "main" the value from "dist/angular-input-match.min.js" to "angular-validation-match.min.js".

When I put no value into match attribute, I'm getting validation error when filling my <input>.

I would expect no validation in case match="".

Demo: http://jsfiddle.net/nr8cLwyp/2/
(Enter anything into confirm field: no matter what password value is, you get validation error and it won't disappear.)

I'm going to make pull request with fix.

I have the following situation (described at https://plnkr.co/edit/Pbo6muD9ga60duJr9g1a?p=preview)

A current password field.
A new password field, with match on the current field and not-match = true (so a user can't re-use their existing password).
A confirm password field, matching on the new field.

I'm using $viewValues to match against.

Steps:

1. enter a value in the new field
2. enter the same value in the confirm field.
3. enter the same value in the current field.

Observed:

The confirm field's $error.match is set to true

Expected:

The confirm field's $error.match is false, since it does in fact match the new field.

Tested on angular 1.5.8, AVM 1.9.0

Edit: fixed plunker link

404 https://rawgit.com/TheSharpieOne/angular-input-match/master/dist/angular-input-match.min.js

Well, not an issue though because 1.3.0 is still in beta, but I'm just saying. Here is a Plunker — just type «aaa» in both input fields and look in the console log.

Say you have a password field with some validator on it, such as requiring it to be at least 8 chars long. Then you have a password2 confirmation field which uses the match directive to make sure it matches the password field. If one enters the same value on both fields, but the value does not pass the password field's validation (e.g. only 2 chars are entered), then password2 is incorrectly marked as invalid even though it does match the password field.

The match directive should only mark the field as invalid if its value is not identical to the source field's value, regardless of whether the source field has other validation issues. The current behavior causes incorrect error messages to be displayed to the user, e.g. a "passwords do not match" error is shown in addition to an 'invalid password length' error, whereas only the latter is true, and once the user fixes it, only then should the second message be shown.