Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/g-sari/ngx-auto-disable-forms
Disables input elements on demand
https://github.com/g-sari/ngx-auto-disable-forms
angular angular-2 angular-cli angular-components angular-material angular2 angular4 angular5 typescript
Last synced: about 2 months ago
JSON representation
Disables input elements on demand
- Host: GitHub
- URL: https://github.com/g-sari/ngx-auto-disable-forms
- Owner: g-sari
- License: apache-2.0
- Created: 2018-04-27T14:25:00.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-30T13:34:19.000Z (about 6 years ago)
- Last Synced: 2024-10-12T08:06:31.175Z (3 months ago)
- Topics: angular, angular-2, angular-cli, angular-components, angular-material, angular2, angular4, angular5, typescript
- Language: TypeScript
- Size: 2.96 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-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
```javascript
npm i ngx-auto-disable-forms --save
```
## Import
Just import the module **'NgxAutoDisableFormsModule'** in your **'app.module.ts'** file.
i.e.
```javascript
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.
```javascript
@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
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.
```javascript
...
your form inputs
...
```
If needed you can also exclude some input fields from being disabled by adding the css class **'exclude-from-roles-and-permissions'**
i.e.
```javascript
```
## Optional
If you want you can provide a roles and permission service, to do this create a service and implement the service **'RolesAndPermissionsServiceInterface'**
```javascript
import { Injectable, Inject } from '@angular/core';
import { RolesAndPermissionsServiceInterface } from 'ngx-auto-disable-forms';
@Injectable()
export class UserRolesAndPermissionsService implements RolesAndPermissionsServiceInterface {
constructor(private userRolesService: UserRolesService) { }
hasOnlyReadPermissions(user: UserModel): boolean {
return this.userRolesService.hasOnlyReadPermissions(user);
}
isAuthorized(user: UserModel): boolean {
return this.userRolesService.isUserAuthorized(user);
}
hasWritePermissions(user: UserModel): boolean {
return this.userRolesService.hasWritePermissions(user);
}
}
```
Additionally you need to provide the service in the **'app.module.ts'** file
```javascript
import { NgxAutoDisableFormsModule, RolesAndPermissionsService } from 'ngx-auto-disable-forms';
@NgModule({
imports: [
NgxAutoDisableFormsModule
],
providers: [
// optional
UserRolesAndPermissionsService,
{
provide: RolesAndPermissionsService,
useExisting: UserRolesAndPermissionsService
},
]
})
```
Now you can use your service in your component
```javascript
@Component({
selector: 'test-component',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnRolesAndPermissions {
constructor(private userRolesAndPermissionsService: UserRolesAndPermissionsService) {}
/**
* @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 this.userRolesAndPermissionsService.hasOnlyReadPermissions(this.currentUser);
}
}
```