admin管理员组

文章数量:1022688

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
Share Improve this question asked Sep 14, 2019 at 18:11 TanzeelTanzeel 5,05824 gold badges85 silver badges159 bronze badges 3
  • (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.

    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
    Share Improve this question asked Sep 14, 2019 at 18:11 TanzeelTanzeel 5,05824 gold badges85 silver badges159 bronze badges 3
    • (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.

      本文标签： javascriptPreventing form submission on Enter key press in AngularStack Overflow

      版权声明：本文标题：javascript - Preventing form submission on Enter key press in Angular - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745490843a2152958.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。