Angular auto disable forms

This module checks roles and permissions of the current signed in user and disables input fields on demand automatically. That means you don’t have to disable each form input field individually. Currently supports: buttons, input fields, text areas, checkboxes, selects

Demo

Getting started

Installation

npm i ngx-auto-disable-forms --save

Import

Just import the module ’NgxAutoDisableFormsModule’ in your ’app.module.ts’ file. i.e.

import { NgxAutoDisableFormsModule } from ‘ngx-auto-disable-forms’;
@NgModule({
imports: [NgxAutoDisableFormsModule],
})

Interface Implementation

Go to your component, where fields should be disabled. And implement the interface ’OnRolesAndPermissions’ i.e.

@Component({
selector: ‘test-component’,
templateUrl: ‘./test.component.html’,
styleUrls: [‘./test.component.scss’],
})
export class TestComponent implements OnRolesAndPermissions {
/**
* @override
* Checks if the view should be displayed in read only mode.
*
* @returns if true, the view’s input form fields are disabled.
*/
isViewReadOnly(): boolean {
return true; // depends on roles and permissions
}
}

Template: test.component.html

Note that you need to add the attribute ’rolesAndPermissionsRelatedContent’ to the div container inside of the components template.

Depending on roles an permissions all UI input fields inside the div will be disabled automatically. i.e.

<div rolesAndPermissionsRelatedContent>
…
your form inputs
…
</div>

If needed you can also exclude some input fields from being disabled by adding the css class ’exclude-from-roles-and-permissions’ i.e.

<button class=”exclude-from-roles-and-permissions”></button>

NPM

ngx-auto-disable-forms

GitHub

g-sari/ngx-auto-disable-forms