CODEWITHSUNDEEP
javascriptangularangular2-directivesangular2-forms
Tauqeer H.
Tauqeer H.

Reputation: 801

How to trim white spaces at beginning of input in ng-2 material <md-input> field

I'm using ng-2 material with angular 2 rc1. I want to restrict the user to add spaces in <md-input></md-input> field. I have tried different methods to solve it. Lastly I added a directive to do this. Here's my directive code

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);
      }
    }

After that I added this directive to the component I want to use. Here's the component code

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]
})

And here the template code to use this directive

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

It works fine with HTML <input> field but it's not working with ng-2 material <md-input></md-input> field

At Express side I'm using Express Validator to validate input fields like this

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

If there's any way to do it at express side that's also good for me

Upvotes: 4

Views: 6135

Answers (1)

Azeem Malik
Azeem Malik

Reputation: 490

if you are using express validator add this 

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

in your express validator.

for more details https://github.com/ctavan/express-validator

Upvotes: 3

Related Questions