javascript - 如何在 ng-2 Material <md-input> 字段中 trim 输入开头的空格

标签 javascript angular angular2-directives angular2-forms

我使用的是带 Angular 2 rc1 的 ng-2 Material 。我想限制用户在<md-input></md-input>中加空格 field 。我尝试了不同的方法来解决它。最后我添加了一个指令来做到这一点。这是我的指令代码

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 配合得很好 <input>字段,但不适用于 ng-2 Material <md-input></md-input>字段

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

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

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

最佳答案

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

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

在您的快速验证器中。

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

关于javascript - 如何在 ng-2 Material <md-input> 字段中 trim 输入开头的空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38395325/

相关文章:

javascript - 在窗口加载之前运行函数

javascript - innerHTML 与 XML 元素一起使用吗?

javascript - "TypeError: undefined is not an object (evaluating ' _expo.default.Font ')]"异步加载字体时遇到这个错误

angular - 引用错误 : "__decorate is not defined" when passing input to an angular directive

javascript - 如何在vuejs中上传图片?

dart - 如何在 Dart VM 上测试 Angular 2 服务?

javascript - 如何以 Angular 显示 snackbar 中对象的数据

html - 选择依赖于另一个选择 - Material Angular

javascript - 订阅派生类上的 Angular2 事件

Angular2 获取动态创建输入的值