Как не допустить отправку формы после нажатия enter?

287
02 января 2018, 16:59

У меня есть реактивная форма:

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div class="line">
    <input class="title" id="title" placeholder="Заголовок вопроса" type="text" formControlName="title">
  </div>
  <div class="line">
    <textarea class="question" name="question" id="question" placeholder="Текст вопроса" formControlName="question" cols="30" rows="10"></textarea>
  </div>
  <div class="line">
    <div class="tags">
      <span class="title">Метки</span>
      <span class="tag" *ngFor="let tag of tags">{{ tag }} <span class="delete" (click)="deleteTag(tag)">X</span></span>
    </div>
    <input class="tag" id="tag" placeholder="Введите тег и нажмите enter" type="text" formControlName="tag" #tag (keyup.enter)="addTag($event, tag.value)">
  </div>
  <div class="line">
    <button class="btn btn-common" type="submit" mat-button [disabled]="form.invalid">
      Отправить
    </button>
  </div>
</form>

js:

private form: FormGroup;
  ngOnInit() {
    this.form = new FormGroup({
      'title':      new FormControl('', [Validators.required, Validators.minLength(1)]),
      'question':   new FormControl('', [Validators.required, Validators.minLength(3)]),
      'tag':        new FormControl()
    });
  }

поле с id='tag' я использую для добавления тегов. Порядок такой: пользователь вводит в это поле название тега и нажимает enter. Проблема в том, что после нажатия enter происходит отправка формы, а я хотел бы этого избежать.

на это поле через (keyup.enter)="addTag($event, tag.value) я повесил обработчик такой:

  private addTag(event, tag): void {
    console.log(event);
    event.preventDefault();
    event.stopPropagation();
    if(!tag.trim().length) { return; }
    this.form.patchValue({tag: ''});
    if(this.tags.indexOf(tag) === -1) {
      this.tags.push(tag.trim());
    }
  }

Как видите, в первых строках происходит отмена стандартного действия и отмена всплытия события. Но это не срабатывает в ангуляре. При этом объект события в консоль выводится

READ ALSO
Пагинация своими руками

Пагинация своими руками

Всех с наступающимРебята подскажите как сделать в пагинации 5 шагов в лево

238
Проблема с data-id

Проблема с data-id

Суть в том, что data-id не соответствуетНе могу понять почему

243
В чем отличие __proto от prototype?

В чем отличие __proto от prototype?

В чем различие этих 2 способов прототипного наследования и какой из них более правильнее использовать?

318