Javascript/Angular2 How can I toggle button based on the form field values

Question

I have a form with mandatory fields as - 1. First Name 2. Last Name 3. Phone 4. State 5. City 6. Date of Birth I have a button which should toggle to complete/Incomplete based on the form inputs.The button should toggle to 'complete' only when all the fields have proper values.If I remove any of the value again,the button should toggle to Incomplete.

In my ts file-

formCompleteOrIncomplete(person,index) {
   if (person.dateOfBirth !== "" && person.phone!== "" &&
      (person.firstName !== undefined || person.firstName !== "") && (person.lastName !== undefined || person.lastName !== "") && (person.state !== undefined || person.state !== "") && (person.city !== undefined || person.city !== "" )) {      
      person.status = true;

    }
    else {
      person.status = false;      
    }
} 

In my html file-

<div class="tag">
   <div class="success" *ngIf="person.status">Complete</div>
   <div class="failed" *ngIf="!person.status">Incomplete</div>
</div>

form fields-

   <md-input required [(ngModel)]="person.firstName" (ngModelChange) = "formCompleteOrIncomplete(person, index)" aria-placeholder="First Name" placeholder="First Name" name="firstName" #firstName="ngModel"></md-input>

On page load the button shows 'Incomplete' as none of the field values are entered and when I enter all the fields, button is getting toggled to 'Complete' but when I try to empty any of the field again, it does not get toggled to 'Incomplete' again.

Also, when i do not include a check for 'undefined' and include only "" check, on page load the button shows 'complete'.NOt sure why is this happening.

Can someone tell me where I am going wrong?

Answer 1

I believe that your problem is in the parts of your if statement that are using the || (or) operator. They should be using the && (and) operator as you don't want them to be either of those values to be filled in. When you change the first name field to be empty after you filled in the rest of the fields, the first part of the check will pass because an empty string is not undefined.

You should be able to clean that up a bit since you are checking for falsey values in both parts of your checks on the form fields. An empty string, undefined, and null will all convert to a false boolean value (you can check it out in your console by putting ! (not) operators before the value and see that when converted to a boolean, each will be false - i.e. !'' will convert the empty string to a boolean value and then do a not operation, so you will see true in your console).

formCompleteOrIncomplete(person,index) {
    // Inverted the order of your true/false portions to match if statement
    if (!person.dateOfBirth || !person.phone || !person.firstName ||
        !person.lastName || !person.state || !person.city) {
        person.status = false;
    }
    else {
        person.status = true;
    }
    
    // Or you could do this to keep the same structure of your if statement
    if (!!person.dateOfBirth && !!person.phone && !!person.firstName &&
        !!person.lastName && !!person.state && !!person.city) {
        person.status = true;
    }
    else {
        person.status = false;
    }
    
    // You could even set the status using your check if you feel comfortable doing that
    person.status =
        !!person.dateOfBirth && !!person.phone && !!person.firstName &&
        !!person.lastName && !!person.state && !!person.city;
}