title: Angular2 value is not binding with model while using event.preventDefault()
body: <p>I have created input directive for validation. In that, I am using event.preventDefault() for not to allow pressed key. </p>
  
  <p>Following is my code:</p>
  
  <pre><code>&lt;input class="input" maxlength="255" [(ngModel)]="chargeLabel" inputRestrictor pattern="^\\w+( \\w+)*$" singleSpace="false" /&gt;
  </code></pre>
  
  <p>Input Directive Code:</p>
  
  <pre><code>export class InputRestrictorDirective {
  
      @Input('inputRestrictor') inputRestrictor: any;
      @Input('pattern') pattern: string;
      @Input() singleSpace = 'true';
      private regex: RegExp;
  
      // Allow key codes for special events. Reflect :
      // Backspace, tab, end, home
      private specialKeys: Array&lt;string&gt; = ['Backspace', 'Tab', 'End', 'Home'];
  
      constructor(private el: ElementRef) {
      }
  
      @HostListener('keypress', ['$event']) onKeyPress(event) {
          this.regex = new RegExp(this.pattern, 'g');
          if (this.specialKeys.indexOf(event.key) !== -1) {
              return;
          }
  
          let inputValue: any = event.target.value + event.key;
          if (inputValue.match(this.regex) === null &amp;&amp; inputValue !== '') {
              if (this.singleSpace === 'true') {
                  event.preventDefault();
                  return false;
              } else {
                  inputValue = inputValue.replace(/\s\s+/g, ' ');
                  inputValue = inputValue.replace(/[^\w\s]/g, '');
                  event.target.value = inputValue;
                  event.preventDefault();
                  return;
              }
          } else {
              return;
          }
      }
  }
  </code></pre>
  
  <p>My problem is that whatever values I enter in textbox is not stored in model but if I press specials key like backspace or tab than it will be stored in model. Means value is bind with model. Can you help out?</p>