Изменить поведение клавиши ввода в телефоне - Angular 5

Question

Я работаю с input s, но я не совсем уверен, как выполняется конфигурация навигации (полагаю, что это предопределенное поведение).

Я не в последнем input кнопка ввода переходит к следующему.Этот работает как я хочу.

Тем не менее, когда я нахожусь на последнем input, когда я нажимаю ввод, он автоматически нажимает на следующий button.

Это то, чего я пытаюсь избежать.Есть ли способ изменить это поведение?Просто чтобы закрыть клавиатуру или нажать на другую button?

Я пробовал с keyup.enter, и она работает псевдо.Он вызывает метод, но также нажимает следующий button

HTML

<input
          type="text"
          class="form-control"
          id="validationCustomSurname"
          placeholder="e.g. Lopez"
          required
          (keyup.enter)="onNavigate(1, 'forward')"
          [(ngModel)]="values.store.surname"
          name="surname"
        />

Этот метод должен работать на телефоне, поэтому я предполагаю, что keydown не вариант, так как $event.code не дает мне никакого кода в телефоне.

Answer 1

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

<form [formGroup]="myForm" (submit)="submit(myForm)" enter-tab>
    Each input or button add a reference variable #nextTab like
    <input name="input1" formControlName="input1" #nextTab/>
    <button type="button" #nextTab/>
</form>

Директива использует ContentChildren для добавления keydown.Введите все компоненты, которые имеют #nextTab, чтобы перейти к следующему элементу управления

export class EnterTabDirective {
  @ContentChildren("nextTab") controls: QueryList<any>
  nextTab

  constructor(private renderer: Renderer2, private el: ElementRef) {
  }
  ngAfterViewInit(): void {
    this.controls.changes.subscribe(controls => {
      this.createKeydownEnter(controls);
    })
    if (this.controls.length) {
      this.createKeydownEnter(this.controls);
    }
  }
  private createKeydownEnter(querycontrols) {
    querycontrols.forEach(c => {
      this.renderer.listen(c.nativeElement, 'keydown.enter', (event) => {
        if (this.controls.last != c) {
          let controls = querycontrols.toArray();
          let index = controls.findIndex(d => d == c);
          if (index >= 0) {
            let nextControl = controls.find((n, i) => n && !n.nativeElement.attributes.disabled && i > index)
            if (nextControl) {
              nextControl.nativeElement.focus();
              event.preventDefault();
            }
          }
        }
      })
    })
  }