Angular8

Question

我是 Angular8 的新手。我有一些要求通过 dropdown(select) 值将焦点设置在不同的输入上。

我试过 event.target.attributes.id /event.currenttarget 之类的东西，但我知道这是不可能的。

我怎样才能做到这一点？

        @Component({
          selector: 'app-test',
          template: '
         <div> 
              <select class="form-control" [(ngModel)]="dropValue" (change)="dropChanged($event)>
              <option value="">Select</option>
              <option value=1>Cat</option>
              <option value=2>Dog</option>
              </select>
        </div>

         <div>
              <input id="CatInput" class="form-control"/>
              <input id="DogInput" class="form-control"/>
         </div>'

        })

export class test implements OnInit {
   dropValue:number;
   constructor() {
      this.dropValue = 0;
   }

   ngOnInit() {}

   dropChanged(e:any) {

      let dropName = e.target.id;

      switch (dropName) {
         case 'CatInput': 
              dropName.focus() or XXX <== I have no idea!!
         break;

         case 'DogInput': 
              dropName.focus() XXX <==  I have no idea!!
         break;
         }
      }
}

Answer 1

同样使用 *ngFor。

<select class="form-control" [(ngModel)]="dropValue" (change)="dropChanged($event)>
<option *ngFor="let v of values; let i = index" [value]="index">{{v}}</option>
</select>

并且在你的 .ts 中将值声明为：

values = ['Select', 'Cat', 'Dog'];

Answer 2

您可以使用 elementref / viewchild 获取输入框上的焦点

   constructor(private elementRef: ElementRef) { // have element ref here
      this.dropValue = 0;
   }

//做一个通用的逻辑b/wselect并输入

就像你 select 来自 UI 的东西假设你 selected cat 你知道有一个我必须关注的 id catinput。

然后您可以使用它来查找元素并专注于此。

this.elementRef.nativeElement.querySelector('#CatInput').focus();

看看下面，我将其创建为一个迷你示例。 https://stackblitz.com/edit/angular-ivy-tu9snc

Answer 3

一个Angular它使用模板引用变量

您可以选择为您的输入提供相同的模板引用并使用 ViewChildren

<div>
    <select class="form-control" [ngModel]="dropValue"
         (ngModelChange)="dropValue=$event;focus($event)">
         <option value="">Select</option>
         <option value=1>Cat</option>
         <option value=2>Dog</option>
  </select>
</div>

<div>
    <input #input id="CatInput" class="form-control"/>
    <input #input id="DogInput" class="form-control"/>
</div>

在您定义的 .ts 中

  dropValue:any
  @ViewChildren('input') inputs:QueryList<ElementRef>

你的函数焦点，你在 QueryList 中找到带有 "id" choose

的元素

focus(value)
  {
    let id="";
    switch (+value)
    {
      case 1:
        id="CatInput"
        break;
      case 2:
        id="DogInput"
        break;
    }
    if (id)
    {
      const input=this.inputs.find(x=>x.nativeElement.getAttribute('id')==id)
      if (input)
        input.nativeElement.focus()
    }
  }

您还可以采用另一种方法，即为每个输入使用不同的模板变量引用

<div>
    <input #catID class="form-control"/>
    <input #dogID class="form-control"/>
</div>

在select中，可以使用option中的[ngValue]创建一个对象，有value和id，用这个"id"做焦点。看到你不需要在 .ts

中编写代码

<select class="form-control" [ngModel]="dropValue" 
       (ngModelChange)="dropValue=$event;$event?.id.focus()">
     <option [ngValue]="null">Select</option>
     <option [ngValue]="{value:1,id:catID}">Cat</option>
     <option [ngValue]="{value:2,id:dogID}">Dog</option>
</select>

参见this stackblitz

中的两个选项

注意：

//I prefer
<input [ngModel]="variable" (ngModelChange)="variable=$event;function()">

//than 
<input [(ngModel)]="variable" (change)="function()">

Angular8 - 通过下拉列表（select）值动态关注多个输入

Angular8 - focus on multiple inputs by dropdown(select) value dynamically

angular