How to create an Angular directive to disable input fields

Question

I am trying to create a directive to be applied to inputs and buttons, that will disable the element based on a condition that I get from a service.

I have already reviewed, and tried the following:

Button @Directive to bind disable attribute via @Input in Angular
Angular2 attribute directive Hostbinding to host attribute
I have tried using just disabled for the HostBinding, but I get Can't bind to 'disabled' since it isn't a known property of 'button'.
I have tried using attr.disabled, but then I get Attempted to set attribute `disabled` on a container node. Host bindings are not valid on ng-container or ng-template.
I am sure that I am not trying to bind to ng-container or ng-template, I am binding directly to a button or input as in the example below
I am able to bind directly to disabled using [disabled]="condition", but that is not what I want here

Here is what I currently have for the directive:

export class InputPermissionsDirective {
  @Input() set appCanModify(name:string) {
    this.canModify(name);
  }
  @HostBinding('disabled') disabled:boolean = false;

  constructor(private permissionsService:PermissionsService) { }

  private canModify(name:string) {
    const routePermissions = this.permissionsService.getPermissionsByRoute(window.location.pathname);

    if(!routePermissions) this.disabled = true;
    else {
      const componentPermissions = this.permissionsService.getPermissionsByComponentName(routePermissions, name)

      if(componentPermissions && componentPermissions.CanModify) this.disabled = false;
      else this.disabled = true;
    }
  }

}

Here, the permissions service queries for the permission levels associated with the input name (FooBar in the below example). From there, the disabled attribute should be set according to the element's permission field CanModify.

And here is an example of me using this directive:

<input type="text" class="form-control" [(ngModel)]="foo" *appCanModify="'FooBar'">

Any help here would be greatly appreciated, and I can provide additional info as needed. Thanks!

You ought to be able to bind directly to the [disabled] property on buttons. Are you sure you've imported CommonModule, within the module which the button is being used? — Mikkel Christensen
– Mikkel Christensen, Commented Nov 12, 2021 at 22:50
Yes, CommonModule is imported through out my application through a shared module export. I can still bind to disabled using brackets as you mentioned on input fields and buttons just fine, but I need to do the disabling through a directive for this use case. — Raj
– Raj, Commented Nov 12, 2021 at 23:04
Try using your directive as an ordinary directive, instead of a structural directive, since you aren't injecting any ViewContainerRef, nor TemplateRef. So directiveName rather than *directiveName — Mikkel Christensen
– Mikkel Christensen, Commented Nov 12, 2021 at 23:08
Ah, I will give that a try. Was going through tutorials originally that included the asterisk, was unaware of the difference. I will give that a try and read up on the differences, thanks! — Raj
– Raj, Commented Nov 12, 2021 at 23:10
@MikkelChristensen that worked! Thanks so much for your help. If you want to provide that comment as an official post I'll mark it as an answer. — Raj
– Raj, Commented Nov 13, 2021 at 2:50

Raj · Accepted Answer · 2021-11-15 14:07:44Z

0

The solution to my issue was that I was trying to use this directive as a structural directive by using the asterisk. Instead, I needed to use it as appCanModify

Thanks to @MikkelChristensen for the solution

answered Nov 15, 2021 at 14:07

Raj

518 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create an Angular directive to disable input fields

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related