Text field returns null on second submission Angular 5

Question

I'm working on a form that filters the results of records, there are 2 text fields that are mat-autocompletes and some checkboxes.

When Apply filter is clicked the value of the fields are inserted into objects and pushed to an array.

And then the form is reset

My situation is, that I don't want the objects to be populated when the fields are empty.

The first time is fine and it works as expected, however on the next iteration, I get "can't get trim of null" (using .trim() on the field)

HTML:

<div class="col-6">
                    <div class="form-group">

                        <mat-form-field floatLabel="never">
                          <mat-placeholder class="placeholder">Organisation</mat-placeholder>
                          <input type="text" matInput formControlName="filterOrganisation" [matAutocomplete]="auto" value="">
                        </mat-form-field>

                        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelect()">
                          <mat-option *ngFor="let organisation of filteredOrganisations | async" [value]="organisation.Name">
                            {{ organisation.Name }}
                          </mat-option>
                        </mat-autocomplete>


                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-group">

                        <mat-form-field floatLabel="never">
                          <mat-placeholder class="placeholder">Countires</mat-placeholder>
                          <input type="text" matInput formControlName="filterCountries" [matAutocomplete]="auto2" value="">
                        </mat-form-field>

                        <mat-autocomplete #auto2="matAutocomplete" (optionSelected)="onSelect()">
                          <mat-option *ngFor="let country of filteredCountries | async" [value]="country.Name">
                            {{ country.Name }}
                          </mat-option>
                        </mat-autocomplete>


                    </div>
                  </div>

TS:

applyUserFilters() {
    let filterCountries: Filter;
    let filterOrganisation: Filter
    this.paginator.pageIndex = 1
    let organisationField = this.filterForm.get('filterOrganisation');
    let countriesField = this.filterForm.get('filterCountries');
    console.log(countriesField.value == '');//Is false second time
    if (organisationField.value.trim() == '') {
      organisationField.setValue('')
    } else {
      filterOrganisation = {
        Value: this.filterForm.get('filterOrganisation').value,
        Operation: this.filterOperation,
        Property: 'Organisation'
      }
      this.filtersArray.push(filterOrganisation);
      console.log(this.filtersArray)
    }

    if (countriesField.value.trim() == '') {
      countriesField.setValue('')
    } else {
      filterCountries = {
        Value: this.filterForm.get('filterCountries').value,
        Operation: this.filterOperation,
        Property: 'Countries'
      }
      console.log(this.filtersArray)
      this.filtersArray.push(filterCountries);
    }


    this.loadUserPage();
    this.clearAllFilters();
    this.toggleDropDown('close');

}

Answer 1

You have to check first if neither of your variables are null:

if (organisationField.value !== null && organisationField.value.trim() == '') {
    //your code here
}

if (countriesField.value !== null && countriesField.value.trim() == '') {
    //your code here
}