如何在 ng-2 材料 <md-input> 字段中的输入开头修剪空格

Posted

技术标签:

【中文标题】如何在 ng-2 材料 <md-input> 字段中的输入开头修剪空格【英文标题】:How to trim white spaces at beginning of input in ng-2 material <md-input> field 【发布时间】:2016-11-18 14:49:25 【问题描述】:

我正在使用具有 angular 2 rc1 的 ng-2 材料。我想限制用户在&lt;md-input&gt;&lt;/md-input&gt; 字段中添加空格。我尝试了不同的方法来解决它。最后我添加了一个指令来做到这一点。这是我的指令代码

import Directive from '@angular/core';

    @Directive(
      selector: 'input[trimmed]',
        host: 
        '(input)': 'onChange($event)',
        '[value]' : 'value',
        '[style.width]' : 'width'
      

    )

    export class TrimmedInput
      value: string;
      constructor()
        this.value='Default Title';
      

      onChange($event)
        this.value = $event.target.value.trim();
        console.log(this.value);
      
    

之后,我将此指令添加到我要使用的组件中。这是组件代码

import  TrimmedInput  from "../../../directives/triminput";

@Component(
    selector: 'my-component',
    template: require('./test.html'),
    styles: [require('./test.css')],
    directives: [MATERIAL_DIRECTIVES, SELECT_DIRECTIVES, BUTTON_DIRECTIVES, MD_INPUT_DIRECTIVES, FORM_DIRECTIVES, TYPEAHEAD_DIRECTIVES, MdRadioButton, MdRadioGroup, TrimmedInput],
    providers: [CoursesService]
)

这里是使用该指令的模板代码

<md-input trimmed placeholder="Course Title" maxLength="100" [(ngModel)]="model.title" ngControl="name" required #name="ngForm" > 
</md-input>

它适用于 HTML &lt;input&gt; 字段,但不适用于 ng-2 材料 &lt;md-input&gt;&lt;/md-input&gt; 字段

在 Express 方面,我使用 Express Validator 来验证这样的输入字段

req.checkBody('name', '* Please provide Course Title').notEmpty();

如果有什么方法可以在快递方面做到这一点,那对我也有好处

【问题讨论】:

【参考方案1】:

如果您使用的是 express 验证器,请添加此

   req.sanitize("name").trim();

在您的快速验证器中。

更多详情https://github.com/ctavan/express-validator

【讨论】:

不错的答案 shokhay :D

以上是关于如何在 ng-2 材料 <md-input> 字段中的输入开头修剪空格的主要内容,如果未能解决你的问题,请参考以下文章

vue 材质 md-input 焦点行为

反应式(基于模型)形式的 Angular 2 md-radio 按钮不起作用并停止 md-input 显示

如何在计算的 vuex 中设置状态?

如何在angularjs材料设计中创建固定页脚

如何访问组件中的角材料颜色?

如何使用材料在同一行中制作图标和占位符?