更新“自动对焦"通过在角度上的模板级别上的交互作用分配属性 [英] Update "autofocus" attribute via interaction on template level in angular

问题描述

与Angular合作时，有关autofocus属性的问题.详细地说，我有一个<form>，上面有一个<input type="text">，最初是由条件集中的.

Having a problem regarding the autofocus attribute in cooperation with Angular. In detail I have a <form> with an <input type="text"> on top which is initially focussed by a condition.

<input [attr.autofocus]="selection===-1"
       [(ngModel)]="myForm.firstInpElem" 
       name="firstInpElem" 
       placeholder="firstInpElem">

此功能正常运行(Chrome).

This is working as expected (Chrome).

然后在由<input type="radio">控制的两个选项之间选择的连续形式.

Then the form continuous with a selection between two options controlled by an <input type="radio">.

一旦做出选择，就会显示一个相应元素，然后应该得到autofocus.

Once a selection is made an according element is shown and then should get the autofocus.

但是那没有发生，我不明白原因.

But that is not happening and I don't understand the reason for it.

使用工作示例准备了 stackblitz ，但下面主要是标记，不能按预期工作

Prepared a stackblitz with a working example but mainly below is the markup which won't work as expected

<h1>Forms example</h1>

<form>

  <pre>Condition to focus "firstInpElem" is {{selection===1|json}}</pre>

  <p>This input element is autofocussed on page load</p>

  <p>
    <input [attr.autofocus]="selection===-1"
           [(ngModel)]="myForm.firstInpElem" 
           name="firstInpElem" 
           placeholder="firstInpElem">
  </p>

  <p>
    Provide one of both information:<br>

    <label>
      <input [(ngModel)]="selection" 
             name="radioInpElem"
             type="radio"
             [value]="1"> 
             Option 1
    </label>
    <br>

    <label>
      <input [(ngModel)]="selection" 
             name="radioInpElem"
             type="radio"
             [value]="2">
             Option 2
    </label>

  </p>

  <pre>Condition to focus "secondInpElem" is {{selection===1|json}}</pre>
  <pre>Condition to focus "thirdInpElem" is {{selection===2|json}}</pre>
  <p>


  <input *ngIf="selection===1"
        [attr.autofocus]="selection===1"
        [(ngModel)]="myForm.secondInpElem"
        name="secondInpElem"
        placeholder="secondInpElem">



  <input *ngIf="selection===2"
          [attr.autofocus]="selection===2"
          [(ngModel)]="myForm.thirdInpElem"
          name="thirdInpElem"
          placeholder="thirdInpElem">
  </p>
</form>


<pre>{{myForm|json}}</pre>

推荐答案

如果签入开发工具(F12工具)，您将看到新的输入控件实际上获得了autofocus属性，但没有获得焦点.这是因为autofocus将焦点放在元素页面加载.对于您来说，当新元素变为可见时，页面已经加载.

If you check in the development tools (F12 tools), you will see that the new input control actually gets the autofocus attribute, but it does not get the focus. That is because autofocus sets the focus on an element when the page loads. In your case, the page is already loaded when the new element becomes visible.

您可以做的是以编程方式将焦点设置在新的输入元素上.为此，您可以为两个具有ngIf条件的输入元素定义一个公共模板引用变量:

What you can do instead is to set the focus programmatically on the new input element. In order to do that, you can define a common template reference variable for the two input elements having an ngIf condition:

<input #inputElement *ngIf="selection === 1"
      [(ngModel)]="myForm.secondInpElem"
      name="secondInpElem"
      placeholder="secondInpElem">

<input #inputElement *ngIf="selection === 2"
        [(ngModel)]="myForm.thirdInpElem"
        name="thirdInpElem"
        placeholder="thirdInpElem">

，并通过ViewChildren和QueryList.changes事件监视这些元素的存在.每当输入元素之一变为可见时，就将焦点设置在该输入元素上:

and monitor the presence of these elements with ViewChildren and the QueryList.changes event. Each time one of the input element becomes visible, you set the focus on it:

@ViewChildren("inputElement") inputElements: QueryList<ElementRef>;

ngAfterViewInit() {
  this.inputElements.changes.subscribe(() => {
    this.inputElements.last.nativeElement.focus();
  });
}

有关演示，请参见此stackblitz .

这篇关于更新“自动对焦"通过在角度上的模板级别上的交互作用分配属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！