Client side error checking not working

Question

I have the following:

The html code which is basically just two input fields inside a form called regForm:

<div>
   <label for="regName">
      <span>Name</span>
      <span class="error" 
         ng-show="regCheckNamesMessage">{{regCheckNamesMessage}}</span>
  </label>
  <div>
     <span class="inputIcon"><i class="fa fa-fw fa-user"></i></span>
     <input autocomplete="off"
         id="regFirstName"
         name="regFirstName"
         ng-change="regCheckNames(regForm.regFirstName, regForm.regLastName)"
         ng-model="regFirstName"
         ng-required="true"
         ng-minlength="2"
         placeholder="First Name"/>
     <input autocomplete="off"
         id="regLastName"
         name="regLastName"
         ng-change="regCheckNames(regForm.regFirstName, regForm.regLastName)"
         ng-model="regLastName"
         ng-required="true"
         ng-minlength="2"
         placeholder="Last Name"
         type="text" />
  </div>
</div>

And I have the following javascript code that does some checking for required fields:

regCheckNames = (regFirstName, regLastName) => {   
   if (regFirstName.$dirty == true && regLastName.$dirty == true) {
        if (regFirstName.$error.required == true && regLastName.$error.required == true) {
            this.regCheckNamesMessage = "Both are required";
        } else {
            this.regCheckNamesMessage = "";
        }
    }

    if (regFirstName.$dirty == true && regLastName.$dirty == false) {
        if (regFirstName.$error.required == true)
            this.regCheckNamesMessage = "First name is required";
        else
            this.regCheckNamesMessage = "";
    }

    if (regFirstName.$dirty == false && regLastName.$dirty == true) {
        if (regLastName.$error.required == true)
            this.regCheckNamesMessage = "Last name is required";
        else
            this.regCheckNamesMessage = "";
    }
}

Somehow the checking code is not working the way I expect it to work. I wanted the error Both are required to appear whenever the user left both fields blank after touching the fields, the error First name is required when the user touch the first name field but left it blank and so on. Anyone can point me to the right direction?

Answer 1

You need it to be an if else. Otherwise the third error message will override the previous errors when both fields are dirty.

regCheckNames = (regFirstName, regLastName) => {   
   if (regFirstName.$dirty == true && regLastName.$dirty == true) {
        if (regFirstName.$error.required == true && regLastName.$error.required == true) {
            this.regCheckNamesMessage = "Both are required";
        } else {
            this.regCheckNamesMessage = "";
        }
    } else if (regFirstName.$dirty == true && regLastName.$dirty == false) {
        if (regFirstName.$error.required == true)
            this.regCheckNamesMessage = "First name is required";
        else
            this.regCheckNamesMessage = "";
    } else if (regFirstName.$dirty == false && regLastName.$dirty == true) {
        if (regLastName.$error.required == true)
            this.regCheckNamesMessage = "Last name is required";
        else
            this.regCheckNamesMessage = "";
    }
}

Answer 2

I'm not sure which version of angular you are using, but you might want to have a look at the ngMessages and form directives. This is a proper way of displaying error messages.

You could use something like this:

<div ng-messages="myForm.regFirstName.$error" role="alert">
    <div ng-message="required">First name is required</div>
  </div>
<div ng-messages="myForm.regFirstName.$error && myForm.regLastName.$error" role="alert">
    <div ng-message="required">Both are required</div>
</div>

You can have a look here