CODEWITHSUNDEEP
jqueryangulartypescript
Rajasekhar
Rajasekhar

Reputation: 2455

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

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

Upvotes: 0

Views: 1113

Answers (2)

JardonS
JardonS

Reputation: 427

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.

Upvotes: 1

MoxxiManagarm
MoxxiManagarm

Reputation: 9134

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

Upvotes: 3

Related Questions