Сосредоточьтесь на вводе на каждом шаге мастера Angular - PullRequest
Новая
       25

Сосредоточьтесь на вводе на каждом шаге мастера Angular

1 голос
/ 27 марта 2020

Среда

  • Angular 8
  • AZ-Wizard

Требование

Нам нужно сфокусировать первый (или определенный c) элемент, когда пользователь переходит к шагу. Каждый шаг будет иметь свои собственные различные элементы (вход, кнопка, выпадающий список и т. Д. c), которые должны получить автофокусировку, чтобы пользователю не приходилось вручную нажимать один из них для запуска потока.

Код пробовал

  1. Использовать тег autofocus для элементов. Это не работает отдельно от 1-го элемента, как в случае с мастером, весь набор шагов представляет собой один DOM.

  2. Используйте событие ngOnViewEdit и ViewChild для нужного элемента в компоненте каждого шага, чтобы установить фокус

    ngOnViewEdit () {var emailElement = (this.email.nativeElement); if (emailElement) {emailElement.focus (); } else alert ("Элемент электронной почты не найден"); } Это также не работает как-то. Также пытался обернуть тело метода вызовом setTimeout с таймаутом от 0 до 1000.

  3. В мастере stepEnter попытаться получить доступ к ViewChild и выполнить попытку фокусировки. Это также не сработало

UI компонента 

`<aw-wizard-step (stepEnter)="setFocus()">
    <app-cost-impact></app-cost-impact>
</aw-wizard-step>`

Компонент TS

setFocus() { var emailComponent = <AddEmailComponent><unknown>this.wizard.currentStep; var emailElement = (<HTMLInputElement>emailComponent.email.nativeElement); if (emailElement) { emailElement.focus(); } else alert("Email element not found"); }

Challange

Нам нужно найти какой-то способ доступа к элементам для каждого шага и сделать его достаточно c, достаточным для обработки всех шагов

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

Попробуйте передать идентификатор элемента ввода в метод setFocus и измените метод setFocus, как показано ниже: 

  setFocus (id: string) {
        setTimeout(() => {
          var inputEl= document.getElementById(id);
          if (inputEl) {
            document.getElementById(inputEl).focus();
          }
        }, 0);
      }

Пользовательский интерфейс компонента: 


    `<aw-wizard-step (stepEnter)="setFocus('inputElementId')">
        <first-component></first-component>
    </aw-wizard-step>
    <aw-wizard-step (stepEnter)="setFocus('anotherElementId')">
        <second-component></second-component>
    </aw-wizard-step>
    `

Таким образом, вы можете просто Объявите метод setFocus один раз в соответствующем файле машинописного текста и можете использовать его для любого количества компонентов, передав идентификатор элемента ввода.

1 голос
/ 27 марта 2020

это можно решить, просто передав элемент в метод setFocus, затем запустите метод фокусировки. 

  setFocus(elm:HTMLElement){
    setTimeout(() =>{
       elm.focus();
    })
  }

template 

<aw-wizard>
 <aw-wizard-step stepTitle="Title of step 1" (stepEnter)="setFocus(email)">
        Content of Step 1
        <button type="button" awNextStep>Next Step</button>
        <button type="button" awNextStep>Go directly to third Step</button>
        <input type="text" placeholder="email" #email>
 </aw-wizard-step>
 <aw-wizard-step stepTitle="Title of step 2" awOptionalStep (stepEnter)="setFocus(age)">
        Content of Step 2
        <button type="button" awPreviousStep>Go to previous step</button>
        <button type="button" awNextStep>Go to next step</button>
        <input type="text" placeholder="age" #age>
 </aw-wizard-step>
</aw-wizard>

demo ?

...