title: Angular 2: How to prevent a form from submitting on keypress enter?
body: <p>I have a form with one field that acts as autocomplete. If the user enters a word and presses enter, the content of the field should be added to a list below the field.</p>
  
  <p>The problem: When the user hits enter, naturally the whole form is being submitted.</p>
  
  <p>I already <code>return false</code> on the function that handles the keypress. But the form seems to be submitted even before this function is called.</p>
  
  <p>How do I prevent this from happening?</p>
  
  <p>The basic form:</p>
  
  <pre><code>&lt;div id="profileForm"&gt;
    &lt;form [formGroup]="profileForm" (ngSubmit)="onSubmit()" method="post" *ngIf="!showSuccessMessage"&gt;
  
      &lt;div class="row"&gt;
  
        &lt;div class="form-group col-xs-12 col-sm-6"&gt;
          &lt;label for="first_name"&gt;My Skills&lt;/label&gt;
          &lt;div class="autocomplete"&gt;
            &lt;input formControlName="skill_string" [(ngModel)]="skillString" name="skill_string"
            type="text" class="form-control" id="skill_string" placeholder="Comma separated" (keyup.enter)="skillsHandleEnter(skillString)"&gt;
            &lt;ul class="autocomplete-list" *ngIf="skillHints.length &gt; 0"&gt;
              &lt;li class="list-item" *ngFor="let skill of skillHints" (click)="addSkillFromAutocomplete(skill)"&gt;{{skill}}&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div id="skill-cloud" class="tag-cloud"&gt;
            &lt;span class="skill-tag tag label label-success" *ngFor="let skill of selectedSkills" (click)="removeSkill(skill)"&gt;{{skill}} x&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
  
        &lt;hr&gt;
  
        &lt;div class="form-group submit-group"&gt;
          &lt;div class="col-sm-12"&gt;
            &lt;button type="submit" class="btn btn-primary pull-right" [disabled]="!profileForm.valid"&gt;Save&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The basic component (I stripped a lot of the logic for posting it here):</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormBuilder } from '@angular/forms';
  import { ActivatedRoute, Router } from '@angular/router';
  
  import { Subscription } from 'rxjs/Rx';
  import 'rxjs/add/operator/debounceTime';
  import * as _ from 'lodash';
  
  import { MemberService } from '../shared/index';
  
  @Component({
    moduleId: module.id,
    selector: 'signup',
    templateUrl: 'signup.component.html',
    styleUrls: ['signup.component.css']
  })
  export class SignupComponent implements OnInit {
  
    private profileForm:FormGroup;
    private validation_errors:Array&lt;any&gt;;
    private selectedSkills:Array&lt;string&gt;;
    private skillHints:Array&lt;string&gt;;
    private skillString:string;
  
    constructor(private route: ActivatedRoute,
      private formBuilder: FormBuilder,
      private memberService: MemberService,
      private router: Router ) {
  
        this.selectedSkills = [];
        this.skillHints = [];
        this.skillString = '';
  
        // Set up form
        this.profileForm = this.formBuilder.group({
          skill_string: ['']
        });
  
    }
  
    ngOnInit(): any {
      // Do something
    }
  
  
  
    updateSelectedSkills(skillString:string):void {
      if(skillString) ) {
        let cleanString = skillString.trim().replace(/[ ]{2,}/g, ' ');
        this.selectedSkills = _.compact(this.selectedSkills.concat(cleanString.split(',')));
        this.skillString = '';
        this.skillHints = [];
      }
    }
  
    skillsHandleEnter(skillString:string):void {
      console.log("ENTER");
      this.updateSelectedSkills(skillString);
      return false;
    }
  
    autocompleteSkills(term:string):void {
      this.memberService.autocompleteSkills(term).subscribe(
        res =&gt; {
          this.skillHints = [];
          for(let i = 0; i &lt; res.data.length; i++) {
            this.skillHints.push(res.data[i].name);
          }
        }
      );
    }
  
    addSkillFromAutocomplete(skillString:string):void {
      this.selectedSkills.push(skillString);
      this.memberProfile.skill_string = '';
      this.skillHints = [];
      this.skillString = '';
    }
  
  
    onSubmit():void {
      this.memberService.saveProfile(this.memberProfile, this.selectedSkills).subscribe(
        res =&gt; {
          console.log(res);
        }
      );
    }
  
  }
  </code></pre>