Security News
OpenJS: “XZ Utils Cyberattack Likely Not an Isolated Incident”
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
ngx-trim-directive
Advanced tools
Weekly downloads
Readme
This directive helps to trim whitespaces of an input text value.
It lies on a simple fact that Angular listens to input
event to bring the view-to-model binding into being.
* According to the description of updateOn property of AbstractControlOptions interface, when updateOn is set to blur
or submit
, Angular listens to blur
or submit
event for model update. In this directive, update-on-blur
case is handled in a hack way. No further processing is required for update-on-submit
case.
Since extra input
and blur
events are dispatched, if you bind a callback to input
event or blur
event, the callback will be invoked twice on input
or blur
.
To overcome the disadvantage, a debounced function is recommended for the event binding.
The directive works with Angular 16+. For earlier versions of Angular, please use version 1.1.0 or 2.0.0.
1.Install ngx-trim-directive
.
npm i -S ngx-trim-directive
2.Import NgxTrimDirectiveModule
to your Angular module.
import { NgxTrimDirectiveModule } from 'ngx-trim-directive';
@NgModule({
imports: [
// ...
NgxTrimDirectiveModule,
// ...
],
// ...
})
3.Add the "trim" attribute to an input element or a textarea element.
<input type="text" ... trim>
Generally, the input value will be trimmed automatically whenever the bound model is initiated or is updated programmatically. There is a boolean trimOnWriteValue property to switch this behavior on
or off
. The default value of this property, if omitted, is true, which means the functionality is on. You can turn the functionality off by setting the trimOnWriteValue
property to false.
<input type="text" ... trim [trimOnWriteValue]="false">
4.If you want to trim the value ONLY on blur event, you should set the value of trim attribute to blur
. This is very handy if a whitespace is allowed inside the input text value.
<input type="text" ... trim="blur">
5.You may turn trim off by binding false to the trim attribute
<input type="text" ... [trim]="trimOption">
<button (click)="trimOption = ''">
Trim on Input
</button>
<button (click)="trimOption = 'blur'">
Trim on Blur
</button>
<button (click)="trimOption = false">
Turn Trim Off
</button>
Where trimOption
is a property of the component class
trimOPtion: '' | 'blur' | false = '';``
trim="blur"
or for ngModel bug fixedblur
updateOn option processedThank you all for your contribution to this directive!
Good luck.
FAQs
This directive helps to trim whitespaces of an input text value.
The npm package ngx-trim-directive receives a total of 5,376 weekly downloads. As such, ngx-trim-directive popularity was classified as popular.
We found that ngx-trim-directive 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.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.
Security News
OSI is starting a conversation aimed at removing the excuse of the SaaS loophole for companies navigating licensing and the complexities of doing business with open source.