How to add error validation if selected dropdown values are blank using angular

Question

Have table with dropdowns with each row, need to validate if any dropdown selected columns are Blank or undefined, need to restrict the validations. Tried with below code but failed, please suggest me the issue.

let selectedDropdownVals = $('#firstTable input[type="checkbox"]:checked')
  .closest('tr')
  .find('select')
  .val();
// const checkBoxLen = this.persons.filter(f => f.checked);
const checkBoxLen = $('#firstTable input[type="checkbox"]:checked');
alert(checkBoxLen.length);
for (let i = 0; i < checkBoxLen.length; i++) {
  if (
    selectedDropdownVals[i] == '' ||
    selectedDropdownVals[i] == undefined ||
    selectedDropdownVals[i] == null ||
    selectedDropdownVals[i] == 'Blank'
  ) {
    alert('Please select correct dropdown option for proceeding!!!');
    return false;
  } else {
    alert('Data is validated, no issues found');
  }
}

Demo

Can you please frame question in different way, I can't get you !! — Gopi krishna
– Gopi krishna, Commented May 18, 2021 at 10:53
HI Gopi Krishna, Here need to add one error messages if selected dropdown(any one of the selected values) values are blank or undefined. — Rajasekhar
– Rajasekhar, Commented May 18, 2021 at 10:57
Seems to provide the expecting result when I test your demo. Which scnenario is not working ? — JardonS
– JardonS, Commented May 18, 2021 at 11:00
If we select first one as "Blank" and remaining selected as null, its not working. — Rajasekhar
– Rajasekhar, Commented May 18, 2021 at 11:05

MoxxiManagarm · Accepted Answer · 2021-05-18 11:09:30Z

First of all a very important recommendation: Never use jQuery for Angular 2+. There are always better ways to do what you want to do with jQuery. I never needed it.

And the same applies to your usecase. You already store the values of the checkbox and the select with ngModel within person.check and person.test. Use those values!

 validateSelectedValues() {
    const invalidPersons = this.persons
      .filter(person => person.check)
      .filter(person => ['', undefined, null, 'Blank'].includes(person.test));

    if (invalidPersons.length > 0) {
      invalidPersons.forEach(person => alert(`Please select correct dropdown option for ${person.firstName} ${person.lastName} before proceeding!!!`));
    } else {
      alert('Data is validated, no issues found');
    }
  }

edited stackblitz: https://stackblitz.com/edit/dropdown-select-value-validations-ybuhdf?file=app/app.component.ts

JardonS · Accepted Answer · 2021-05-18 11:38:29Z

Your problem has nothing to do with angular, and actually, you should choose to use whether jQuery or angular, mixing them is not a good idea. I will then address the problem as a pure jQuery one.

The problem is coming from the call to the val() jQuery method. This method returns the value of the first jQuery object of the selector. When executing selectedDropdownVals[i], you are actually selecting a single character in the value of the first dropdown..

Instead of playing with 2 parallels table, I also suggest to change the way you're seeing the problem.

As you are coming from node inside the html table, you can adapt your logic in order to follow a per row logic.

In the following example, you will see a way to find the select present in the same "tr" using relative navigation.

validateSelectedValues() {
    const checkBoxLen = $('#firstTable input[type="checkbox"]:checked');
    alert(checkBoxLen.length);
    for (let i = 0; i < checkBoxLen.length; i++) {

      let v = checkBoxLen.parent('tr').find('select').val();

      if (
        v == '' ||
        v == undefined ||
        v == null ||
        v == 'Blank'
      ) {
        alert('Please select correct dropdown option for proceeding!!!');
        return false;
      } else {
        alert('Data is validated, no issues found');
      }
    }

Anyway, before resolving your jQuery issue, I think you need to stop going in this direction that will cause you several refresh issue with angular and stay in a pure angular validation.

Collectives™ on Stack Overflow

How to add error validation if selected dropdown values are blank using angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related