There are so many answers for this on stackoverflow. But unfortunately none of them is working for me. I will tell you what I have tried one by one.

1. <form (keydown.enter)="$event.preventDefault()" ...>

2. <button (keyup.enter)="skillsHandleEnter($event, skillString)"></button>

   @Component(...) class MyComponent { skillsHandleEnter(event, skillString) { event.preventDefault(); // ... your logic } }

But none of the approach is working. I am using ngx-tags-input which allows me to apply some tags separated by enter key. This creates a problem. The moment I press Enter key, my form gets submitted with just one tag that i was able to enter. Trust me I've tried almost everything to prevent this and also I dont want to over plicate the things. Please ignore naming conventions. I will fix them later.

Here's my blogponent.html before implementing any solution.

<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="exampleInputEmail1">
      <h3>Title</h3>
    </label>
    <input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
    <br>
    <label for="editor">
      <h3>Editor</h3>
    </label>
    <quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
  </div>
  <ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
  <button class="btn btn-primary mt-3 mb-3">Submit</button>
</form>

Please correct me.

There are so many answers for this on stackoverflow. But unfortunately none of them is working for me. I will tell you what I have tried one by one.

1. <form (keydown.enter)="$event.preventDefault()" ...>

2. <button (keyup.enter)="skillsHandleEnter($event, skillString)"></button>

   @Component(...) class MyComponent { skillsHandleEnter(event, skillString) { event.preventDefault(); // ... your logic } }

But none of the approach is working. I am using ngx-tags-input which allows me to apply some tags separated by enter key. This creates a problem. The moment I press Enter key, my form gets submitted with just one tag that i was able to enter. Trust me I've tried almost everything to prevent this and also I dont want to over plicate the things. Please ignore naming conventions. I will fix them later.

Here's my blog.ponent.html before implementing any solution.

<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="exampleInputEmail1">
      <h3>Title</h3>
    </label>
    <input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
    <br>
    <label for="editor">
      <h3>Editor</h3>
    </label>
    <quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
  </div>
  <ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
  <button class="btn btn-primary mt-3 mb-3">Submit</button>
</form>

Please correct me.

• javascript
• html
• angular
• typescript

• (onSubmit)="onSubmit(f)", function onSubmit(f) { f.preventDefault(); } or similour. – Anuga Commented Sep 14, 2019 at 21:27
• Hi @Tanzeel if any of the answera has solve your question please consider accept it.This indicates to the wider munity that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this.