Null and Undefined check in Typescript - Angular Forms-CodePudding

I have this huge check in Form values of Angular Application and I need to refactor.

((this.dropdownSearchForm.get('name').value === undefined || this.dropdownSearchForm.get('name').value === null || this.dropdownSearchForm.get('name').value.length === 0) &&
    (this.dropdownSearchForm.get('status').value === undefined || this.dropdownSearchForm.get('status').value === null || this.dropdownSearchForm.get('status').value.length === 0) &&
    (this.dropdownSearchForm.get('address').value === undefined || this.dropdownSearchForm.get('address').value === null || this.dropdownSearchForm.get('address').value.length === 0) &&
    (this.dropdownSearchForm.get('edu').value === undefined || this.dropdownSearchForm.get('edu').value === null || this.dropdownSearchForm.get('edu').value.length === 0) &&
    (this.dropdownSearchForm.get('salary').value === undefined || this.dropdownSearchForm.get('salary').value === null || this.dropdownSearchForm.get('salary').value.length === 0));

How can I simplify this with Typescript utils to achieve the same result with minimum code?

Note: Angular forms touch or pristine doesn't work. So checking this logic to validate form values.

I tried checking type of and it didn't work for some reason.

CodePudding user response：

So it looks like you're checking that the value of each form is either undefined, null, or 0.

Your conditional appears to be verifying that each control includes one of these values.

Since the values are all falsy, I think you could do this...

checkEm() {
  const vals = [
        this.dropdownSearchForm.get('name').value,
        this.dropdownSearchForm.get('status').value,
        this.dropdownSearchForm.get('address').value,
        this.dropdownSearchForm.get('edu').value,
        this.dropdownSearchForm.get('salary').value,
    ]
    // Make sure every value is falsy (!{falsy_value} = true):
    return vals.every(val => !val)
}

CodePudding user response：

You can try something similar to this:

 this.myForm = fb.group({
        field1: [null],
        field2: [null]
        // more fields 
    }, {validator: this.myValidator})

Then in your validator iterate the formcontrols in your group, sum up and return error or null based on valid or not:

 myValidator(group: FormGroup) {
      let sum = 0;
      for(let a in group.controls) {
        sum  = group.get([a]).value;
      }
      return sum > 10 ? { notValid: true} : null
    }

and in the template you can display error with:enter code here

*ngIf="myForm.hasError('notValid')"

CodePudding user response：

Based off of Tanner's answer, you can just pass in the keys themselves and have the loop handle the this.dropdownSearchFor.get(...).value part.

checkEm() {
  const vals = [
        'name',
        'status',
        'address',
        'edu',
        'salary'
    ]
    // Make sure every value is falsy (!{falsy_value} === true):
    return vals.every(val => !this.dropdownSearchForm.get(val));
}

based on the content of the question, it seems like your original code might be wrong, since it looks like you want to make sure every value is truthy

that code would look like this:

checkEm() {
  const vals = [
        'name',
        'status',
        'address',
        'edu',
        'salary'
    ]
    // Make sure every value is truthy:
    return vals.every(val => this.dropdownSearchForm.get(val));
}

CodePudding user response：

Please try to use this code snippet:

(!this.dropdownSearchForm.get('name').value &&
!this.dropdownSearchForm.get('status').value &&
!this.dropdownSearchForm.get('address').value &&
!this.dropdownSearchForm.get('edu').value &&
!this.dropdownSearchForm.get('salary').value);