![](/img/trans.png)
[英]Angular Reactive Forms Dynamic Nested Array detecting the change on losting the focus
[英]Angular change focus on enter in reactive forms
我创建了一个表格和一个按钮,用于在表格内创建带有输入的动态行。 当我在第一个输入中按 Enter 时,我想创建新行(我已经完成)但无法专注于新输入。 这是我尝试过的
<input type="text" class="form-control" placeholder="Product Code" formControlName="product_code" tabindex="{{i+1}}" (keyup.enter)="autoProduct($event)">
.ts 代码:
autoProduct(event) {
this.addProduct();
if (event.keyCode === 13) {
event.preventDefault();
const inputs =
Array.prototype.slice.call(document.querySelectorAll('input'));
console.log(inputs);
const index =
(inputs.indexOf(document.activeElement) + 1) % inputs.length;
console.log(index);
const input = inputs[index];
console.log(input);
input.focus();
input.select();
}
}
您可以使用ViewChildren
。
private inputToFocus: any;
@ViewChildren('inputToFocus') set inputF(inputF: any) {
this.inputToFocus = inputF
this.inputToFocus.first.nativeElement.focus();
}
在input
标签中添加#inputToFocus
。 <input ... #inputToFocus>
我不知道您如何添加新输入,但您可以使用以下代码。
.ts:
import { Component, ViewChildren } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular 6';
counts = [1];
private inputToFocus: any;
@ViewChildren('inputToFocus') set inputF(inputF: any) {
this.inputToFocus = inputF
this.inputToFocus.last.nativeElement.focus();
}
autoProduct(event) {
if (event.keyCode === 13) {
event.preventDefault();
const inputs =
Array.prototype.slice.call(document.querySelectorAll('input'));
const index =
(inputs.indexOf(document.activeElement) + 1) % inputs.length;
this.addProduct(index);
const input = inputs[index];
input.focus();
input.select();
}
}
addProduct(i) {
this.counts.push(i)
}
}
.html:
<div *ngFor="let count of counts; let i=index">
<input type="text" class="form-control" placeholder="Product Code" tabindex="{{i+1}}" (keyup.enter)="autoProduct($event)" #inputToFocus>
</div>
请注意,我现在使用的是.last
。
我提供了这个示例代码,这将允许您控制表单中的焦点。每次按 Enter 或向下箭头键时,此示例代码将聚焦下一个字段。 您可以根据自己的需要对其进行自定义。 此示例代码显示它也适用于引导程序。
基本上,任何输入字段都记录在表格中。 然后,由您决定专注于您想要的那个。 如果动态添加输入字段,表格将被更新。
我还没有找到更好的角度方法。
编辑器.component.html
<div > <form> <!-- container-fluid prend toute la largeur de la vue --> <div class="container-fluid" *ngFor="let item of data; let i = index" > <div class="form-group"> <div class="row"> <div class="col-md-3">{{item.designation}}</div> <div class="col-md-2">{{item.type}} </div> <div *ngIf="item.type == 'float'"class="col-md-2">{{item.value | number : '1.1-3'}} </div> <div *ngIf="item.type == 'int'"class="col-md-2">{{item.value | number }} </div> <div class="col-md-2"> <input #input type="number" class="form-control" (keydown)="onKeydown($event,i)"> </div> <div class="col-md-3">{{item.commentaire}} </div> </div> <!-- row --> </div> <!-- form group --> </div> <!--container-fluid--> </form> </div> <!--form-->
editor.component.ts :
import { Component, OnInit } from '@angular/core'; import { ViewChildren, QueryList } from '@angular/core'; @Component({ selector: 'app-editor', templateUrl: './editor.component.html', styleUrls: ['./editor.component.css'] }) export class EditorComponent implements AfterViewInit { // Viewchildren // https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e @ViewChildren("input") inputs: QueryList<any> constructor() { } private onKeydown(event,val) { console.log(event.key); if ((event.key == "Enter") || (event.key == "ArrowDown")) { // focus next input field if (val +1 < this.inputs.toArray().length) this.inputs.toArray()[val+1].nativeElement.focus(); else this.inputs.toArray()[0].nativeElement.focus(); } } private processChildren(): void { console.log('Processing children. Their count:', this.inputs.toArray().length) } ngAfterViewInit() { console.log("AfterViewInit"); console.log(this.inputs); this.inputs.forEach(input => console.log(input)); // susbcribe to inputs changes, each time an element is added (very optional feature ...) this.inputs.changes.subscribe(_ => this.processChildren() // subsequent calls to processChildren ); } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.