<ion-card *ngFor='#product of products | mapToIterable:"key":true'>
<ion-list>
<ion-item>
<ion-label stacked>Account No. / Phone No.</ion-label>
<ion-input type="text" [(ngModel)]="product.msisdn"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Amount</ion-label>
<ion-input type="text" (keypress)="isNumberKey($event)" [(ngModel)]="product.amount"></ion-input>
</ion-item>
</ion-list>
</ion-card>
参考上面的html,我如何得到离子输入的参考,以便在验证失败后我可以在它上面设置setFocus().我已经提出了下面的代码来验证每个输入.
for (var product of <any>this.products) {
if (product.service_type_id == 2 && !product.msisdn) {
alert('something');
//Get the element and set focus here.
}
}
解决方法
获取使用* ngFor创建的元素的引用的方法是@ViewChildren()
如果元素实际上是组件或指令,则组件/指令类型可以作为参数传递,否则可以添加模板变量,并且模板变量的名称(作为字符串)可用于查询元素.
在这种情况下,模板变量和组件类型都返回组件实例,但是为了调用焦点,我们需要ElementRef.nativeElement,因此我创建了一个应用于ion-input的辅助指令,用于查询元素以及调用焦点()：
import {Component,Directive,Renderer,HostListener,ViewChildren,ElementRef} from 'angular2/core'
/// Helper directive
@Directive({
selector: 'ion-input'
})
class Focusable {
constructor(public renderer: Renderer,public elementRef: ElementRef) {}
focus() {
console.debug(this.elementRef.nativeElement);
this.renderer.invokeElementMethod(
this.elementRef.nativeElement,'focus',[]);
}
}
/// Test component instead of the original ion-input
@Component({
selector: 'ion-input',host: {'tabindex': '1'},template: `
<div>input (focused: {{focused}})</div>
`,})
export class IonInput {
focused:boolean = false;
@HostListener('focus')
focus() {
this.focused = true;
}
@HostListener('blur')
blur() {
this.focused = false;
}
}
/// Queries the elements and calls focus
@Component({
selector: 'my-app',directives: [IonInput,Focusable],template: `
<h1>Hello</h1>
<div *ngFor="let product of products">
<ion-input #input type="text"></ion-input>
</div>
<button *ngFor="let product of products; let index=index" (click)="setFocus(index)">set focus</button>
`,})
export class AppComponent {
constructor(private renderer:Renderer) {
console.debug(this.renderer)
}
products = ['a','b','c']
@ViewChildren(Focusable) inputs;
ngAfterViewInit() {
// `inputs` is now initialized
// iterate the elements to find the desired one
}
setFocus(index) {
// `inputs` is now initialized
// iterate the elements to find the desired one
//var input = ...
//console.debug(this.inputs.toArray()[1]);
this.inputs.toArray()[index].focus();
}
}
