web-dev-qa-db-ja.com

Angular 2マテリアル入力フォーカスが機能しない

入力はモーダルダイアログ内にあります。なぜ機能しないのか分かりません。公式ドキュメントを見て、要素に渡すことができるものとしてフォーカスをリストしましたが、機能していませんか？

誰が理由を知っていますか？

角形素材-入力ドキュメント

<form class="example-form">

  <md-input-container class="example-full-width" style="width: 300px; padding: 5px; border-radius: 10px;">
    <input mdInput type="email" name="to" placeholder="Email">
    <md-error></md-error>
  </md-input-container>

  <md-input-container focus focused>
    <input mdInput type="text" name="a" placeholder="zzzz" focus focused (focus)="">
  </md-input-container>

</form>
angularangular-material2angular-forms
9
Knack Kwenie

次の理由であなたの試みは機能しません：

  • focusedは、mdInputContainerのマットフォーカスクラスを駆動するプロパティです。これを使用して、入力がフォーカスされているかどうかを知ることができます。フォーカス状態を変更するために使用することはできません。
  • focusはmdInputのメソッドであり、プログラムで入力に集中できます。たとえば、myInput.focus()のようなmyInputでViewChild('myInput')を呼び出すことができます。

しかし、あなたが望むものを達成する最も簡単な方法は、標準のautofocus属性を使用することです：

<md-input-container>
    <input mdInput type="text" name="a" placeholder="zzzz" autofocus>
</md-input-container>
11
David Palita

初期化時にフォーカスを受け取る要素を指定するcdkFocusInitialで試してみてください

ドキュメントを見つけることができます こちら

6
Jayampathy Wijesena
<form class="example-form">
  <md-input-container class="example-full-width" style="width: 300px; padding: 5px; border-radius: 10px;">
    <input mdInput #emailInput="matInput" type="email" name="to" placeholder="Email">
    <md-error></md-error>
  </md-input-container>
</form>

次に、コントローラーで：

@ViewChild('emailInput') searchInput: MatInput;
....
ngAfterViewInit() {
  this.emailInput.focus();
}

This.emailInput.focus（）が行うことは、実際には「elementRef.nativeElement.focus（）」です https://github.com/angular/material2/blob/master/src/lib/input/input.ts# L287

だからあなたはあなたの自己のようにすることができます：

this.emailInput.nativeElement.focus()
5
Mackelito

私は同じ問題に苦しんでいました。 F6を使用してダイアログを開きましたが、<input>フォーカスを取得します。 F6のデフォルトの動作を妨げていなかったことが判明し、F6はブラウザーのURLウィンドウを強調表示します。フォーカスを盗んでいた。

switch (event.keyCode) {
      case 117:
        event.preventDefault();
        this.openAddAveragesDialog();
        break;
      default:
        return;
    }

また、マジックタグ属性は機能しません。オートフォーカス、フォーカス、フォーカス、何でも、サイコロなし。ディレクティブを作成し、それを入力要素で使用する必要がありました。私は this answerを使用してそれについて助けを得ました。

ディレクティブを追加した後の要素は次のとおりです（numberOnlyは数値入力専用の別のディレクティブです）。

<md-input-container> <input mdInput [focus]="true" [numberOnly]="true"/></md-input-container>

**編集：わかりやすくするために@Mackelitoによって提案されたディレクティブコードを追加します。上にリンクした回答を使用して書いたディレクティブを次に示します。素材のタグラベルが<input matInput> from <input md-input>

import {Directive, ElementRef, Inject, Input, OnChanges, OnInit,     Renderer} from '@angular/core';

@Directive({
  selector: '[focus]'
})

export class FocusDirective implements OnChanges, OnInit {
@Input()
focus: boolean;

constructor(@Inject(ElementRef) private element: ElementRef, public renderer: Renderer) {}

ngOnInit() {
    this.renderer.invokeElementMethod(this.element.nativeElement,   'focus', []);
}

public ngOnChanges() {
this.element.nativeElement.focus();
}

}
5
Hodglem

通常、テンプレートマークアップを使用して、TypeScriptコードなしでフォーカスを設定できます。ただし、ダイアログの場合は、_@ViewChild_およびngAfterViewInit()で@Mackelitoのソリューションを使用する必要があります。

メニューが表示されるときに、メニュー内にあるTextAreaにフォーカスする必要がありました。幸いなことに、Menuには（menuOpened）イベントをバインドできます。

_  <button mat-stroked-button color="accent" [matMenuTriggerFor]="addMenu"
    (menuOpened)="newTypes.focus()">
    Add
    <mat-icon class="dyna-dropdown-arrow">arrow_drop_down</mat-icon>
  </button>
  <mat-menu #addMenu="matMenu" [overlapTrigger]="false">
    <form [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" novalidate (keydown.tab)="$event.stopPropagation()">
      <mat-form-field appearance="outline" (click)="$event.stopPropagation(); false;">
        <mat-label>New Pay Types</mat-label>
        <textarea #newTypes rows="6" matInput placeholder="New Pay Types" [formControl]="formGroup.controls['payTypes']" required></textarea>
        <mat-hint>Enter multiple Pay Types, separated by newlines</mat-hint>
        <mat-error *ngIf="formGroup.controls['payTypes'].invalid">Required</mat-error>
      </mat-form-field>
      <div fxLayout="row-reverse" fxLayoutGap="8px" fxLayoutAlign="start center">
        <button mat-stroked-button color="accent" type="submit" [disabled]="!formGroup.valid">Add</button>
        <button mat-button type="button">
          Cancel
        </button>
      </div>
    </form>
  </mat-menu>
_

ここで重要な部分は_(menuOpened)="newTypes.focus()"_であり、newTypesは_<textarea #newTypes_としてマークされたTextAreaにアタッチされたTemplateRef変数です。

ここに、私のメニューが開いていることを示すスクリーンショットがあり、すぐにその中のTextareaにフォーカスを取得します。

enter image description here

0
H Dog