我有一个新的Angular 2应用程序,其中包含一个输入框列表.当用户点击返回键时,我会在他们当前正在编辑的输入框之后立即添加一个新输入框.或者更确切地说,我(异步)在模型中向数组添加一个新条目,这使得Angular 2在不久的将来自动生成一个新的输入框.
如何使输入焦点自动更改为新添加的元素?
[edit]或者,我得到了一个引起DOM生成的模型对象的引用.从组件代码中,有没有办法搜索表示特定模型对象的DOM元素?
[编辑]这是我的代码,使这项工作.希望这对一些Angular 2开发者来说足够冒犯以鼓励回复:-)
app.WordComponent = ng.core
.Component({
selector: 'word-editor',
template:'<input type="text" [value]="word.word" (input)="word.update($event.target.value)" (keydown)="keydown($event)"/>',
styles:[
''
],
properties:[
'list:list',
'word:word'
]
})
.Class({
constructor:[
function() {
}
],
keydown:function(e) {
if(e.which == 13) {
var ul = e.target.parentNode.parentNode.parentNode;
var childCount = ul.childNodes.length;
this.list.addWord("").then(function(word) {
var interval = setInterval(function() {
if(childCount < ul.childNodes.length) {
ul.lastChild.querySelector('input').focus();
clearInterval(interval);
}
}, 1);
});
}
}
});
Run Code Online (Sandbox Code Playgroud) 在我的应用程序中,我想在组件加载时自动将焦点放在表单的第一个字段上.任何人都可以指导如何实现这一点,而不是重复,因为我想在我的应用程序中的每个表单(活动表单)上.
angular2-forms angular2-directives angular2-template angular
我是angular的新手,在我的应用程序中有一个Mat-dialog,其中有两种形式,即Login和SignUp。
第一次打开对话框时,自动焦点设置在用户名字段上。问题是当我单击按钮导航到SignUp表单时,该表单的FIRST名字段没有自动聚焦,现在从注册导航到登录用户名字段的方法相同不能自动聚焦。
我已经尝试了一些stackoverflow解决方案,但没有任何解决方案解决我的问题。
popupScreen.component.html
<form class="login" *ngIf="isLoginHide">
<mat-form-field>
<input matInput placeholder="username">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="password">
</mat-form-field>
<button mat-button color="primary">Login</button>
<button mat-button (click)="hideLogin($event)" color="accent">SignUp</button>
</form>
<form class="SignUp" *ngIf="isSignUpHide">
<mat-form-field>
<input matInput placeholder="First Name">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Last Name">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="username">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="password">
</mat-form-field>
<button mat-button (click)="hideSignUp($event)" color="primary">Login</button>
<button mat-button color="accent">SignUp</button>
</form>
Run Code Online (Sandbox Code Playgroud)
谁能帮我解决这个问题。
<div class="posts">
<div class="post">
<div>post content</div>
<a class="comment">Comment</a>
<textarea [(ngModel)]= "model.text" class="comment-text" name="text"></textarea>
</div>
<div class="post">
<div>post content</div>
<a class="comment">Comment</a>
<textarea [(ngModel)]= "model.text" class="comment-text" name="text"></textarea>
</div>
</div>
...
Run Code Online (Sandbox Code Playgroud)
我想在“a”点击时将焦点设置在 textarea 上。谁能帮帮我吗。我正在使用角度 5