如何在ng-2材质<md-input>字段中输入开始时修剪空白

时间:2016-07-15 11:45:46

标签: javascript angular angular2-directives angular2-forms

我正在使用角度为2 rc1的ng-2材质。我想限制用户在<md-input></md-input>字段中添加空格。我尝试过不同的方法来解决它。最后,我添加了一个指令来执行此操作。这是我的指令代码

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材料<md-input></md-input>字段

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

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

如果有任何方法可以在快递方面做到这对我也有好处

1 个答案:

答案 0 :(得分:3)

如果您使用快速验证器添加此

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

在您的快速验证员中。

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