通过角度模板级别的交互更新“自动对焦”属性

问题描述 投票:3回答:2

与Angular合作有关于autofocus属性的问题。详细地说,我有一个<form>,顶部有一个<input type="text">,最初由一个条件聚焦。

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

这是按预期工作(Chrome)。

然后表格连续选择由<input type="radio">控制的两个选项。

一旦做出选择,将显示相应的元素,然后应该获得autofocus

但这没有发生,我不明白它的原因。

准备了一个stackblitz with a working example,但主要是下面的标记,将无法按预期工作

<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>
html angular
2个回答
4
投票

如果您检查开发工具(F12工具),您将看到新的输入控件实际上获得了autofocus属性,但它没有获得焦点。那是因为autofocus将重点放在元素when the page loads上。在您的情况下,当新元素变得可见时,页面已经加载。

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

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

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

并使用ViewChildrenQueryList.changes事件监控这些元素的存在。每次输入元素之一变为可见时,您将焦点设置在它上面:

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

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

有关演示,请参阅this stackblitz


0
投票

另一个选项是隐藏输入(不使用* ngIf else display.style)和引用变量请参阅https://stackblitz.com/edit/angular-sbc4pp?file=src%2Fapp%2Fapp.component.html

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

  <input #second [style.display]="selection===1?'inherit':'none'"
        [(ngModel)]="myForm.secondInpElem"
        name="secondInpElem"
        placeholder="secondInpElem">

  <input #third [style.display]="selection===2?'inherit':'none'"
          [(ngModel)]="myForm.thirdInpElem"
          name="thirdInpElem"
          placeholder="thirdInpElem">

你的功能改变了

  change(element:any,index:number)
  {
  this.selection=index;
  setTimeout(()=>{element.focus()},0);
  }
© www.soinside.com 2019 - 2024. All rights reserved.