Password Verification in angular js

Question

I have a directives.js file in which i have my directives defined. I need to add one more directive for password verification.

I have gone thru lot of links. I am not able to succeed. From the below link,

password-check directive in angularjs

I am not able to understand how come 'data-password-verify' attribute refers to the definition of 'passwordVerify' directive?? where should the mapping be defined?

http://docs.angularjs.org/guide/directive#creating-custom-directives_matching-directives — Philipp Gayret, Jan 25 '14 at 21:25
directive are created in camel case and transform into dash separation string, helloWorld become hello-world, plus directive can be used as element, attribute, class or as attribute with a data prefix to be HTML5 compliant, so helloWorld can be used as data-hello-world attribute. — Jonathan de M., Jan 25 '14 at 21:27

score 0 · Answer 1 · answered Jan 25 '14 at 21:27

In the following example, we say that the <input> element matches the ngModel directive.

<input ng-model="foo">

The following also matches ngModel:

<input data-ng:model="foo">

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive {@link http://en.wikipedia.org/wiki/CamelCase camelCase} normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using {@link http://en.wikipedia.org/wiki/Letter_case#Computers dash-delimited} attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

Strip x- and data- from the front of the element/attributes.

Convert the :, -, or _-delimited name to camelCase.

Read the documentation

score 0 · Accepted Answer · answered May 31 '17 at 17:03

I've struggled with this, and it's messy. I see no help in a directive, because logically, all that's needed is to constrain one value to match another by validation. All I needed was ng-pattern and a helper filter to escape a string into a tight regular expression. (Note I'm checking emails, but the concept is identical.)

My code:

<input type="email" name="email" ng-model="data.email" 
       required placeholder="jane.doe@example.com">
<input type="email" name="verify" ng-model="verify" 
       required ng-pattern="data.email | quotepattern">

The quotepattern filter implementation is:

function(input) {
  if (!! input) {
    return "^" + input.replace(/(\W)/g, "\\$1") + "$";
  } else {
    return input; 
  }
}

This does a valid binding on both, and checks for validity. If the first value changes, both controls get updated. If the verify control value changes, only that control is affected.

To me, this is infinitely simpler than directive hackery, and conceptually more correct too, since logically all you need to do is check for a string match in the verify control. Engineering an entire new control with custom editing logic to do that is breeding an entire yak only to shave it.

Password Verification in angular js

2 Answers2