相关疑难解决方法(0)

专注于新添加的输入元素

我有一个新的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)

angular

76
推荐指数
4
解决办法
9万
查看次数

Angular 2将焦点设置在组件加载的第一个表单字段上

在我的应用程序中,我想在组件加载时自动将焦点放在表单的第一个字段上.任何人都可以指导如何实现这一点,而不是重复,因为我想在我的应用程序中的每个表单(活动表单)上.

angular2-forms angular2-directives angular2-template angular

11
推荐指数
2
解决办法
1万
查看次数

如何在Angular 6中手动将焦点设置在mat-form-field上

我是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)

谁能帮我解决这个问题。

typescript angular-material angular

11
推荐指数
6
解决办法
2万
查看次数

单击时将焦点设置为 textarea angular 5

<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

angular angular5

3
推荐指数
2
解决办法
2万
查看次数