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?

you can set a boolean value to check it the formControl is valid or not if it is valid you change the button value to complete or true or else incomplete or false — Rahul Singh
– Rahul Singh, Commented Apr 1, 2017 at 7:00

Daniel W Strimpel · Accepted Answer · 2020-11-12 07:41:27Z

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;
}

Well explained! Changing the OR operator to AND worked.I also had to check for undefined and empty check together.

raneshu · Accepted Answer · 2017-04-01 07:30:27Z

You don't need the formCompleteorIncomplete function or ngModel, ngModelChange etc....

You should use angular2's ReactiveForms. ReactiveForms are the preferred approach to working with forms.

like so:

ngOnInit() {
    this.form= this.formBuilder.group({
      firstName: ['', Validators.required ],// <--- set any validators here
      lastName: ['', Validators.required ],
      ...//and so on...
      })
    });

Next, add a formControlName:

<md-input required formControlName="firstName" aria-placeholder="First Name" placeholder="First Name" name="firstName"></md-input>

finally, you can toggle buttons with form.valid like so: (form.valid changes depending on whether the form is valid (based on the validators you set above).

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

Check this site out for an example.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related