
Research
npm Malware Targets Telegram Bot Developers with Persistent SSH Backdoors
Malicious npm packages posing as Telegram bot libraries install SSH backdoors and exfiltrate data from Linux developer machines.
@ngspot/ngx-errors
Advanced tools
Reactive forms validation for pros
I very much missed the ng-messages
directive from AngularJS, so I created a similar set of directives to use in Angular 2+.
In contrast to the directives from AngularJS, the directives in this library require passing the control name to the directive, instead of the control's errors.
This allowed me to hook into the status of control, such as its dirty
state, and display validation messages according to that status.
The design of this library promotes less boilerplate code, which keeps your templates clean.
There are a few rules that the library follows to determine when to display errors:
touched
.
formIsSubmitted
, but dealing with a control that does not have a parent form, the config for this control will fall back to touched
.For more info about this see Advanced configuration.
Angular | @ngspot/ngx-errors |
---|---|
>17.1 | 4.x |
>13.0 | 3.x |
>9.1 | 2.x |
npm install @ngspot/ngx-errors
yarn add @ngspot/ngx-errors
Import NGX_ERRORS_DECLARATIONS
into application module:
import { NGX_ERRORS_DECLARATIONS } from '@ngspot/ngx-errors'
@NgModule({
imports: [
...NGX_ERRORS_DECLARATIONS, // <-- include
],
})
export class MyAppModule {}
Import NGX_ERRORS_DECLARATIONS
into component:
import { NGX_ERRORS_DECLARATIONS } from '@ngspot/ngx-errors'
@Component({
selector: 'my-component',
standalone: true,
imports: [
...NGX_ERRORS_DECLARATIONS, // <-- include
],
template: `...`
})
export class MyAppModule {}
import { NGX_ERRORS_DECLARATIONS } from '@ngspot/ngx-errors'; // <-- import declarations
@Component({
selector: 'my-component',
standalone: true,
imports: [ReactiveFormsModule, ...NGX_ERRORS_DECLARATIONS], // <-- include imported declarations in the imports
template: `
<form [formGroup]="myForm">
<input formControlName="email" type="email" />
<div ngxErrors="email">
<div *ngxError="'required'">Email is required</div>
</div>
</form>
`,
})
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
email: ['', Validators.required],
});
}
}
@Component({
selector: 'my-component',
standalone: true,
imports: [ReactiveFormsModule, ...NGX_ERRORS_DECLARATIONS],
template: `
<input [formControl]="email" placeholder="Email" type="email" />
<div [ngxErrors]="email">
<div *ngxError="'required'">Email is required</div>
</div>
`,
})
export class MyComponent implements OnInit {
email = new FormControl('', Validators.required);
}
@Component({
selector: 'my-component',
standalone: true,
imports: [FormsModule, ...NGX_ERRORS_DECLARATIONS],
template: `
<input [(ngModel)]="email" #emailModel="ngModel" required type="email" />
<div [ngxErrors]="emailModel.control">
<div *ngxError="'required'">Email is required</div>
</div>
`,
})
export class MyComponent implements OnInit {
email: string;
}
Configure how and when the errors should show up by using provideNgxErrorsConfig()
function either at the application level or at the component level:
At the application level:
import { provideNgxErrorsConfig } from '@ngspot/ngx-errors';
bootstrapApplication(AppComponent, {
providers: [
provideNgxErrorsConfig({
showErrorsWhenInput: 'dirty',
showMaxErrors: 1,
})
]
}).catch((err) =>
console.error(err)
);
At the component level
import { provideNgxErrorsConfig } from '@ngspot/ngx-errors';
@Component({
...
providers: [
provideNgxErrorsConfig({
showErrorsWhenInput: 'dirty',
showMaxErrors: 1,
})
]
})
export class MyComponent { }
Here's the configuration object interface:
export interface IErrorsConfiguration {
/**
* Configures when to display an error for an invalid control. Options that
* are available by default are listed below. Note, custom options can be
* provided using CUSTOM_ERROR_STATE_MATCHERS injection token.
*
* `'touched'` - *[default]* shows an error when control is marked as touched. For example, user focused on the input and clicked away or tabbed through the input.
*
* `'dirty'` - shows an error when control is marked as dirty. For example, when user has typed something in.
*
* `'touchedAndDirty'` - shows an error when control is marked as both - touched and dirty.
*
* `'formIsSubmitted'` - shows an error when parent form was submitted.
*/
showErrorsWhenInput?: string;
/**
* The maximum amount of errors to display per ngxErrors block.
*/
showMaxErrors?: number;
}
By default, the following error state matchers for displaying errors can be used: 'touched'
, 'dirty'
, 'touchedAndDirty'
, 'formIsSubmitted'
.
Custom error state matchers can be added using the CUSTOM_ERROR_STATE_MATCHERS
injection token.
First, define the new error state matcher:
@Injectable({ providedIn: 'root' })
export class MyAwesomeErrorStateMatcher implements IErrorStateMatcher {
isErrorState(
control: AbstractControl | null,
form: FormGroupDirective | NgForm | null
): boolean {
return !!(control && control.value && /* my awesome logic is here */);
}
}
Second, use the new error state matcher when providing CUSTOM_ERROR_STATE_MATCHERS
in the AppModule:
providers: [
{
provide: CUSTOM_ERROR_STATE_MATCHERS,
deps: [MyAwesomeErrorStateMatcher],
useFactory: (myAwesomeErrorStateMatcher: MyAwesomeErrorStateMatcher) => {
return {
myAwesome: myAwesomeErrorStateMatcher,
};
},
},
];
Now the string 'myAwesome'
can be used either in the showErrorsWhenInput
property of the configuration object or in the [showWhen]
inputs.
You can override the configuration specified through provideNgxErrorsConfig()
function by using [showWhen]
input on [ngxErrors]
and on [ngxError]
directives:
<div ngxErrors="control" showWhen="touchedAndDirty">
<div *ngxError="'required'; showWhen: 'dirty'">
This will be shown when control is dirty
</div>
<div *ngxError="'min'">
This will be shown when control is touched and dirty
</div>
</div>
Often there's a requirement to submit a form when user presses Enter. Under the hood ngxError relies on form submit event to display errors. That is why it's important to trigger form submission properly rather than binding (keyup.enter)
event to the method in your component class directly. Here's how to do that:
<form
[formGroup]="form"
(ngSubmit)="yourMethod()"
(keyup.enter)="submitBtn.click()"
>
...
<button #submitBtn>Submit</button>
</form>
Each control error in Angular may contain additional details. For example, here's what min
error looks like:
const control = new FormControl(3, Validators.min(10));
const error = control.getError('min');
console.log(error); // prints: { min: 10, actual: 3 }
You can easily get access to these details in the template:
<div ngxErrors="control">
<div *ngxError="'min'; let err">
Number should be greater than {{ err.min }}. You've typed {{ err.actual }}.
</div>
</div>
In the example above we're accessing error context through a variable err
(can be anything you want).
ngxErrors
directive can be applied to an element such as div or to an ng-container
. If it's a div, that div can be targeted with the following CSS included in the global CSS file:
[ngxerrors] {
color: red;
}
Angular Material inputs have their own way of setting logic for determining if the input needs to be highlighted red or not. If custom behavior is needed, a developer needs to provide appropriate configuration. @ngspot/ngx-errors configures this functionality for the developer under the hood. In order for this configuration to integrate with @angular/material inputs smoothly, use package @ngspot/ngx-errors-material
. It also provides an additional optimization where mat-form-field
component serves the purpose of ngxErrors
directive.
Install:
npm install @ngspot/ngx-errors-material
Use:
import { NGX_ERRORS_MATERIAL_DECLARATIONS } from '@ngspot/ngx-errors-material'; // <-- import the declarations
@Component({
selector: 'my-component',
standalone: true,
imports: [
ReactiveFormsModule,
MatInputModule,
...NGX_ERRORS_MATERIAL_DECLARATIONS, // <-- include imported declarations
],
template: `
<form [formGroup]="form">
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput formControlName="name" />
<!--
Note: there's no parent ngxErrors directive.
mat-form-field serves the purpose ngxErrors directive.
-->
<mat-error *ngxError="'required'">Name is required</mat-error>
</mat-form-field>
</form>
`
})
export class MyComponent {
private fb = inject(FormBuilder);
form = this.fb.group({
name: this.fb.control('', { validators: [Validators.required] }),
});
}
ngx-errors library provides a couple of misc function that ease your work with forms.
Makes it easy to trigger validation on the control, that depends on a value of a different control
Example with using FormBuilder
:
import { dependentValidator } from '@ngspot/ngx-errors';
export class LazyComponent {
constructor(fb: FormBuilder) {
this.form = fb.group({
password: ['', Validators.required],
confirmPassword: [
'',
dependentValidator<string>({
watchControl: (f) => f!.get('password')!,
validator: (passwordValue) => isEqualToValidator(passwordValue),
}),
],
});
}
}
function isEqualToValidator<T>(compareVal: T): ValidatorFn {
return function (control: AbstractControl): ValidationErrors | null {
return control.value === compareVal
? null
: { match: { expected: compareVal, actual: control.value } };
};
}
The dependentValidator
may also take condition
. If provided, it needs to return true for the validator to be used.
const controlA = new FormControl('');
const controlB = new FormControl(
'',
dependentValidator<string>({
watchControl: () => controlA,
validator: () => Validators.required,
condition: (val) => val === 'fire',
})
);
In the example above, the controlB
will only be required when controlA
value is 'fire'
As of today, the FormControl does not provide a way to subscribe to the changes of touched
status. This function lets you do just that:
* const touchedChanged$ = extractTouchedChanges(formControl);
As of today, the FormControl does not provide a way to mark the control and all its children as dirty
. This function lets you do just that:
markDescendantsAsDirty(formControl);
One time config: git config --global push.followTags true
npm run test:lib
npm run commit
and choose fix or featurenpm run release
npm run build:lib
npm publish
git push
build:lib
- Builds the librarytest:lib
- Runs teststest:lib:headless
- Runs tests in headless mode with Chromerelease
- Releases a new version; this will bump the library's version and update the CHANGE_LOG
file based on the commit messagerelease:first
- Creates the first releasecommit
- Creates a new commit message based on Angular commit message conventioncontributors:add
- Adds a new contributor to the README
fileMIT © Dmitry Efimenko
Thanks goes to these wonderful people (emoji key):
Dmitry A. Efimenko 💻 🎨 📖 🤔 | Ana Boca 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
Unknown package
The npm package @ngspot/ngx-errors receives a total of 1,623 weekly downloads. As such, @ngspot/ngx-errors popularity was classified as popular.
We found that @ngspot/ngx-errors demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Malicious npm packages posing as Telegram bot libraries install SSH backdoors and exfiltrate data from Linux developer machines.
Security News
pip, PDM, pip-audit, and the packaging library are already adding support for Python’s new lock file format.
Product
Socket's Go support is now generally available, bringing automatic scanning and deep code analysis to all users with Go projects.