angular 当input失去焦点时，删除首尾空格trim ngx-trim-directive.

npm 搜索ngx-trim-directive

链接

用法：

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 = '';