相关疑难解决方法(0)

Angular 2:如何阻止表单在按键输入时提交?

我有一个表单,其中一个字段充当自动完成.如果用户输入单词并按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" …
Run Code Online (Sandbox Code Playgroud)

javascript angular

12
推荐指数
2
解决办法
1万
查看次数

标签 统计

angular ×1

javascript ×1