Angular 2: Как предотвратить отправку формы при нажатии клавиши enter?

у меня есть форма с одним полем, которое действует как автозаполнение. Если пользователь вводит слово и нажимает enter, содержимое поля должно быть добавлено в список под полем.

проблема: когда пользователь нажимает enter, естественно, вся форма отправляется.

Я уже return false на функцию, которая обрабатывает нажатие клавиши. Но форма представляется представленной еще до вызова этой функции.

как предотвратить это от происходит?

базовая форма:

<div id="profileForm">
  <form [formGroup]="profileForm" (ngSubmit)="onSubmit()" method="post" *ngIf="!showSuccessMessage">

    <div class="row">

      <div class="form-group col-xs-12 col-sm-6">
        <label for="first_name">My Skills</label>
        <div class="autocomplete">
          <input formControlName="skill_string" [(ngModel)]="skillString" name="skill_string"
          type="text" class="form-control" id="skill_string" placeholder="Comma separated" (keyup.enter)="skillsHandleEnter(skillString)">
          <ul class="autocomplete-list" *ngIf="skillHints.length > 0">
            <li class="list-item" *ngFor="let skill of skillHints" (click)="addSkillFromAutocomplete(skill)">{{skill}}</li>
          </ul>
        </div>
        <div id="skill-cloud" class="tag-cloud">
          <span class="skill-tag tag label label-success" *ngFor="let skill of selectedSkills" (click)="removeSkill(skill)">{{skill}} x</span>
        </div>
      </div>

    </div>

    <div class="row">

      <hr>

      <div class="form-group submit-group">
        <div class="col-sm-12">
          <button type="submit" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button>
        </div>
      </div>

    </div>

  </form>
</div>

основной компонент (я лишил много логики для размещения его здесь):

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<any>;
  private selectedSkills:Array<string>;
  private skillHints:Array<string>;
  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 => {
        this.skillHints = [];
        for(let i = 0; i < 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 => {
        console.log(res);
      }
    );
  }

}
9
angular javascript

4 ответов

попробовать

<form (keydown.enter)="$event.target.tagName == 'TEXTAREA'" [formGroup]="profileForm" (ngSubmit)="onSubmit($event)">

Это также позволит enter на Textareas.

11

так, ответ был на самом деле довольно просто... Это не было Event.preventDefault() так как я слушал Enter в поле ввода,а не кнопку. Удаление type="submit" С button было недостаточно, так как все кнопки по умолчанию имеют тип submit. Единственное необходимое изменение было на элементе button, добавив type="button" явно и добавление (click) слушатель:

<button type="button" (click)="onSubmit()" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button>

единственная проблема: теперь отправка формы с enter никогда не работает. Было бы немного более элегантно только запретить enter отправлять форму, когда фокус находится в поле ввода автозаполнения.

Edit:

чтобы запретить enter отправлять форму только тогда, когда курсор находится в поле автозаполнения, можно использовать решение Ankit Singh и немного изменить его:

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()" method="post" (keydown.enter)="$event.target.id != 'skill_string'" *ngIf="!showSuccessMessage">

(Примечание: условие должно возвращать false, чтобы предотвратить запуск действия по умолчанию)

конечно, нам нужно наше регулярное представление кнопка еще раз (без прикрепленного события click, или форма будет отправлена дважды):

<button type="submit" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button>

вы также можете проверить event.target.classList если вы хотите использовать .autocomplete класса. Или переместите логику проверки в функцию, в которую вы передаете $event.

6

события в Angular 2 ведут себя как обычные события DOM. Чтобы захватить объект события, pass $event в качестве параметра в случае обратного вызова из шаблона:

HTML-код:

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

JavaScript с помощью событие.preventDefault ():

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

запретить отправку формы на enter или нажатием button

<textarea (keydown.enter)="provoked($event)"></textarea>

<button (keydown.enter)="provoked($event)" (click)="provoked($event)"></button>

provoked($event) {
   $event.preventDefault()
}

в случае если вам нужно передать данные в метод, то попробуйте

<textarea (keydown.enter)="provoked($event, data)"></textarea>

<button (keydown.enter)="provoked($event, data)" (click)="provoked($event, data)"></button>

provoked($event, data) {
   $event.preventDefault()

   // process the data here
}
0