Is there a way to prevent mat-select usage in TypeScript through a directive?

Question

Is there a way to prevent mat-select usage in TypeScript through a directive?

Working with Angular 9 / typescript and looking to disable specific form elements based on a certain condition. I came across a helpful example where all elements are disabled, but noticed that MAT-SELECT remains active. How can I disable it?

https://i.sstatic.net/j9Khp.jpg

The original example code:

private disableElement(element: any) {
    if (this.appDisable) {
      if (!element.hasAttribute(DISABLED)) {
        this.renderer.setAttribute(element, APP_DISABLED, '');
        this.renderer.setAttribute(element, DISABLED, 'true');

        // disabling anchor tab keyboard event
        if (element.tagName.toLowerCase() === TAG_ANCHOR) {
          this.renderer.setAttribute(element, TAB_INDEX, '-1');
        }
      }
    } else {
      if (element.hasAttribute(APP_DISABLED)) {
        if (element.getAttribute('disabled') !== '') {
          element.removeAttribute(DISABLED);
        }
        element.removeAttribute(APP_DISABLED);
        if (element.tagName.toLowerCase() === TAG_ANCHOR) {
          element.removeAttribute(TAB_INDEX);
        }
      }
    }
    if (element.children) {
      for (let ele of element.children) {
        this.disableElement(ele);
      }
    }
}

My modified code snippet:

private disableElement(element: any) {
    if (this.appDisable) {
      if (element.tagName == "INPUT" || element.tagName == "MAT-SELECT" || element.tagName == "BUTTON") {
        if (!element.hasAttribute(DISABLED)) {
          this.renderer.setAttribute(element, APP_DISABLED, '');
          this.renderer.setAttribute(element, DISABLED, 'true');

          // disabling anchor tab keyboard event
          if (element.tagName.toLowerCase() === TAG_ANCHOR) {
            this.renderer.setAttribute(element, TAB_INDEX, '-1');
          }
        }
      }
    } else {
      if (element.tagName == "INPUT" || element.tagName == "MAT-SELECT" || element.tagName == "BUTTON") {
        if (element.hasAttribute(APP_DISABLED)) {
          if (element.getAttribute('disabled') !== '') {
            element.removeAttribute(DISABLED);
          }
          element.removeAttribute(APP_DISABLED);
          if (element.tagName.toLowerCase() === TAG_ANCHOR) {
            element.removeAttribute(TAB_INDEX);
          }
        }
      }
    }
    if (element.children) {
      for (let ele of element.children) {
        this.disableElement(ele);
      }
    }
}

angular typescript dom angular-material angular-directive

Answer 1

Answer №1

One issue that arises is the difference between a mat-select and an input select element

If you are utilizing ReactiveForms, you have the option of creating a custom directive that makes use of the enable() and disable() methods from FormControls

An example of such a directive would be:

import {Directive, Input} from "@angular/core";
import { FormGroupDirective } from "@angular/forms";

@Directive({
  selector: "[appDisable]"
})
export class DisableDirective {
  constructor(private fgd: FormGroupDirective) {}
  @Input() set appDisable(value: boolean) {
    Object.keys(this.fgd.form.controls).forEach(x => {
      const control = this.fgd.form.get(x);
      if (control) {
        if (value) control.disable();
        else control.enable();
      }
    });
  }
}

This directive can then be used within a form like so:

<form [formGroup]="form" [appDisable]="disabled">
    <mat-form-field appearance="fill">
        <mat-label>Favorite food</mat-label>
        <mat-select formControlName="food">
            <mat-option *ngFor="let food of foods" [value]="food.value">
                {{food.viewValue}}
            </mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field appearance="fill">
        <mat-label>Name</mat-label>
        <input matInput formControlName="name"/>
    </mat-form-field>
</form>
<button mat-button (click)="disabled=!disabled">{{disabled?'Enable!':'Disable!'}}</button>

Refer to this stackblitz for a live example

Update: How to access a button or NgControls To access a button or NgControl, we need to utilize ContentChild and ContentChildren. We declare two variables as follows:

  @ContentChild(MatButton) button: MatButton;
  @ContentChildren(NgControl, { descendants: true }) controls: QueryList<NgControl>;

Accessing a ContentChild requires waiting until ngAfterViewInit before translating the code into a function. Additionally, the function accounts for scenarios where reactive Forms are not being used by disabling the controls. Here's how it looks:

  setEnabled(value: boolean) {
    if (this.fgd) {
      Object.keys(this.fgd.form.controls).forEach(x => {
        const control = this.fgd.form.get(x);
        if (control) {
          if (value) control.disable();
          else control.enable();
        }
      });
    } else {
      if (this.controls) {
        this.controls.forEach(x => {
          const control = x.ngControl;
          if (control) {
            if (value) control.disable();
            else control.enable();
          }
        });
      }
    }
    if (this.button) this.button.disabled = value;
  }

To implement this functionality, call the function in ngAfterViewInit and in the setter, while also introducing a new private variable _disable:

  @Input() set appDisable(value: boolean) {
    this._disable = value;
    this.setEnabled(value);
  }
  ngAfterViewInit() {
      this.setEnabled(this._disable);
  }

It's worth noting that the stackblitz has been updated with all these changes

Answer 2

One issue that arises is the difference between a mat-select and an input select element

If you are utilizing ReactiveForms, you have the option of creating a custom directive that makes use of the enable() and disable() methods from FormControls

An example of such a directive would be:

import {Directive, Input} from "@angular/core";
import { FormGroupDirective } from "@angular/forms";

@Directive({
  selector: "[appDisable]"
})
export class DisableDirective {
  constructor(private fgd: FormGroupDirective) {}
  @Input() set appDisable(value: boolean) {
    Object.keys(this.fgd.form.controls).forEach(x => {
      const control = this.fgd.form.get(x);
      if (control) {
        if (value) control.disable();
        else control.enable();
      }
    });
  }
}

This directive can then be used within a form like so:

<form [formGroup]="form" [appDisable]="disabled">
    <mat-form-field appearance="fill">
        <mat-label>Favorite food</mat-label>
        <mat-select formControlName="food">
            <mat-option *ngFor="let food of foods" [value]="food.value">
                {{food.viewValue}}
            </mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field appearance="fill">
        <mat-label>Name</mat-label>
        <input matInput formControlName="name"/>
    </mat-form-field>
</form>
<button mat-button (click)="disabled=!disabled">{{disabled?'Enable!':'Disable!'}}</button>

Refer to this stackblitz for a live example

Update: How to access a button or NgControls To access a button or NgControl, we need to utilize ContentChild and ContentChildren. We declare two variables as follows:

  @ContentChild(MatButton) button: MatButton;
  @ContentChildren(NgControl, { descendants: true }) controls: QueryList<NgControl>;

Accessing a ContentChild requires waiting until ngAfterViewInit before translating the code into a function. Additionally, the function accounts for scenarios where reactive Forms are not being used by disabling the controls. Here's how it looks:

  setEnabled(value: boolean) {
    if (this.fgd) {
      Object.keys(this.fgd.form.controls).forEach(x => {
        const control = this.fgd.form.get(x);
        if (control) {
          if (value) control.disable();
          else control.enable();
        }
      });
    } else {
      if (this.controls) {
        this.controls.forEach(x => {
          const control = x.ngControl;
          if (control) {
            if (value) control.disable();
            else control.enable();
          }
        });
      }
    }
    if (this.button) this.button.disabled = value;
  }

To implement this functionality, call the function in ngAfterViewInit and in the setter, while also introducing a new private variable _disable:

  @Input() set appDisable(value: boolean) {
    this._disable = value;
    this.setEnabled(value);
  }
  ngAfterViewInit() {
      this.setEnabled(this._disable);
  }

It's worth noting that the stackblitz has been updated with all these changes

Answer 3

Answer №2

The code snippet provided above is tailored for a standard select element, not relevant to mat-select with a material directive.

When using ViewChild, the element retrieved is of type MatSelect which does not possess a nativeElement property. This leads to an undefined value in your specific scenario.

However, consider utilizing the following approach:

In your HTML template

<mat-select [disabled]=isDisabled >
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>

Within your component, you have the flexibility to toggle the "isDisabled" property based on certain conditions.

Answer 4

The code snippet provided above is tailored for a standard select element, not relevant to mat-select with a material directive.

When using ViewChild, the element retrieved is of type MatSelect which does not possess a nativeElement property. This leads to an undefined value in your specific scenario.

However, consider utilizing the following approach:

In your HTML template

<mat-select [disabled]=isDisabled >
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>

Within your component, you have the flexibility to toggle the "isDisabled" property based on certain conditions.

Is there a way to prevent mat-select usage in TypeScript through a directive?

Answer №1

Answer №2

Similar questions

Tips on accessing InnerText with VUEJS

Error in Angular 9 Component Test: Unable to locate export named 'ngbNav'

Converting an array into an array of objects using Node.js

I am facing an issue with Angular's ngFor where it is not displaying the data fetched from my Spring Boot application on the browser

Issue with the display of JQuery slider within TypeScript Angular directive in C# environment

The error message "NullInjectorError: No provider for HTTP!" is generated by the ionic-native/http module

Switch from manipulating the DOM to using Angular binding to update the td element with fresh information

Saving the compiled Angular dist folder in the artifactory repository

Using Angular's NgFor directive to loop through a list of items and trigger a click event

Issues resolving the signature of a parameter in a Typescript decorator within vscode

Determining the generic type from supplied Record values in TypeScript: A guide

Utilize the MD_CARD component exclusively from Material Design 2, omitting the rest of the features from the Material

Display popup when the form is submitted

Leveraging Observables with ngrx for efficient async pipe implementation

Destructuring an array of strings for use as parameters

Updating to Angular 2's latest release, rc5

Switch up row values in an array and transform them into an object using SheetJS

Unable to receive a response from the HttpClient

Angular 10 - unable to bind 'formGroup' as it is not recognized as a valid property of 'form'

How to upload a TypeScript package to NPM for installation using both import and CDN methods