5

I have a form that is using a directive called ng-select which enhances select inputs. In my setup, I allow a user to make some selections and then click on a "Filter" button.

Upon clicking this button, I disable the input.

HTML:

<div class="form-group">
   <div class="input-group">
      <ng-select #cc formControlName="costCenter" (removed)="updateChoices(cc.active, 'costCenter')" [allowClear]="true" [multiple]="true"
      [items]="getCostCenters()" placeholder="Select one or more Cost Centers">
      </ng-select>
      <span class="input-group-btn">
      <button #b_cc class="btn btn-sm btn-default" type="button" title="Update Filter" (click)="updateChoices(cc.active, 'costCenter', cc, b_cc)"><i class="fa fa-filter"></i></button>
      </span>
   </div>
</div>

Component Function:

    /**
     * Upon selecting a data point, reload available options 
     * based on data selected.
     * 
     * @param formValues 
     * @param field 
     */
    updateChoices(formValues, field, selectInput, button): void {

        // Show the loading indicator
        this.showLoader = true;

        // Set and fetch data
        this.selectedFields[field] = formValues;
        this.getFields(this.selectedFields, false);

        // Disable our search field and filter button
        button.disabled = true;
        selectInput.disabled = true;

    }

You can see in the component that I am disabling both the field and the button that they clicked on.

I am now trying to implement a reset method where I can reset all of the fields back to empty, including toggling them to enabled.

I tried doing it through my reactive form by using this.importForm.controls['costCenter'].enable(); but that didn't do anything.

I inspected the form after reset and it gets set back to pristine and not touched, so I know my form reset is working, the re-enabling is not though.

I have also tried to do this in my form reset method as such:

this.importForm.reset({
  costCenter: {value:[], disabled:false},
});

What am I missing here?

SBB
  • 8,560
  • 30
  • 108
  • 223
  • Why did you disable the DOM itself instead of the FormControl? Instead of `selectInput.disabled = true;` try `this.importForm.controls['costCenter'].disable()` – Harry Ninh Aug 17 '17 at 00:46
  • @HarryNinh I did try that when I first set it up and it wouldn't disable. When I inspect the form after running disabled, it is in fact being set `_status = DISABLED` but the input on the UI does not reflect this. I am starting to think the directive does not implement reactive forms correctly or at all which is why I had to go the `DOM` method. – SBB Aug 17 '17 at 00:52
  • Yea I think the culprit is `ng-select` directive. If you can't disable the select **using the FormControl**, you can't expect enabling the select **using the FormControl** will work. – Harry Ninh Aug 17 '17 at 01:24
  • Is there a way to update the dom from the component to achieve this? I know it's not the advised way but until I can see if the creator can fix this, I need some bandaid – SBB Aug 17 '17 at 01:27
  • I've similar issue with input text field. See here https://stackoverflow.com/questions/47091397/how-to-enable-disable-autocomplete-component-of-angular-material-based-on-angula – Temp O'rary Nov 16 '17 at 08:57

1 Answers1

11

Apparently solution to this is here.

This worked for me

<input [attr.disabled]="IsTextBoxDisabled?'true':null">
Temp O'rary
  • 5,366
  • 13
  • 49
  • 109