More on ng-required and form.$invalid

[LiamK]

Mareczek,

Posted this but you may not have seen it. Will you be able to look into this?

I have done some more testing (of the "required" behavior) and now it's behaving differently, but not quite right, still. There seems to be some kind of interaction with other input elements.

There are 3 inputs, 1 textarea and 1 international-phone-number element.

The elements that are required (or ng-required) no longer seem to affect the value of form.$invalid.

form.fullname.$invalid can be true, but form.$invalid is still false. I think if a form element is invalid the form should also be invalid itself.

For that reason, the blank form starts as valid, since the required fields are ignored.

A focus + unfocus on the international-phone-number element makes form.$invalid = true. It shouldn't!

If required fields are filled in and I focus + backspace on the international-phone-number, then form.$invalid = false, but it should be true.

Could you please take another look at this? Really appreciate your help.

[ianalexander]

I also can reproduce this issue.

issue: using the international-phone-number directive causes form.$invalid and form.$valid to display incorrect values. They do not update correctly with the form's input's content.

Steps to reproduce:

    <form ng-submit="signUp(user)" name="signupForm">
          <label class="item item-input item-first">
            <input  name="email"
                    type="email"
                    autocorrect="off" autocapitalize="off" spellcheck="false"
                    ng-model="user.email"
                    placeholder="Email"
                    required
                    >
          </label>
          <div class="item item-input item-input-tel item-last">
            <input  type="tel"
                    name="phonenumber"
                    ng-model="user.phonenumber"
                    placeholder="Phone Number"
                    required
                    international-phone-number
                    skip-util-script-download
                    default-country="us"
                    > <!-- change number-validator -->
          </div>
        ....
        <div class="item" style="display:none;">
          <pre>
            signupForm = {{ signupForm }}
          </pre>
          <pre>
            signupForm.$invalid = {{ signupForm.$invalid }}
          </pre>
          <pre>$error = {{ signupForm.$error | json }}</pre>
        </div>
    </form>

Watch as you click and input text into the forms that signupForm.$invalid does not change properly. Removing the international-phone-number directive returns behavior to normal.

@mareczek events from intl-tel-input are namespaced so I don't think it is related to that.

[ianalexander]

Just did some debugging, can someone check my thinking here?

On line 82 in the event that the input is empty, we're returning the value of that input (which can be undefined: if(!value) return value will always return something that is !value). Does the $validators function choke on a undefined value? If we change this return value to false this seems to have the desired effect, but I am not sure at what cost.

Can someone help me understand if this is the right way to resolve this? Should this also be implemented on lines 69 and 77?

[LiamK]

Neither am I ! But check my pull request. It's working for me.

On 05/05/2015 04:23 PM, Ian Alexander wrote:

Just did some debugging, can someone check my thinking here?

On line 69 in the event that the input is empty, we're returning the value of that input (which will be |undefined| always: |if(!value) return value| will always return something that is |!value|. If we change this to an empty string (|''|) this seems to have the desired effect, but I am not sure at what cost.

Can someone help me understand if this is the right way to resolve this?

— Reply to this email directly or view it on GitHub https://github.com/mareczek/international-phone-number/issues/39#issuecomment-99259869.

[GAAOPS]

I got same problem too. i do not have a required phone numbers on my form and i will get validation error. The problem is in line 82( ctrl.$validators) the model will have the dial code value of the selected country. here is a quick fix for that, you can replace ctrl.$validators function with this code (I have not test it completely, but it works fine for me):

    ctrl.$validators.internationalPhoneNumber = function(value) {
        if (!value) {                
        return '';    //   <----- I'm not sure about this! but it solved my problem for now, change it at your risk, original value will put the validation state to undefined! but if you replace return value; with return ''; it would work fine.
        } else {
            var dialCode= element.intlTelInput("getSelectedCountryData").dialCode;
            if (value === dialCode && !element.attr('required'))
                return '';
            return element.intlTelInput("isValidNumber");
      }

here i check if the element has the value of dialCode and if it has required.

Hope it helps you too.

[mareczek]

This has been fixed in v0.0.8

[skfd]

I'm getting this on v0.0.8. :(

[mareczek]

Please take a look at version 0.0.9