web-dev-qa-db-fra.com

Angular 2 Le focus d'entrée du matériau ne fonctionne pas

Les entrées sont à l'intérieur d'une boîte de dialogue modale. Je n'ai aucune idée pourquoi cela ne fonctionne pas. J'ai regardé les documents officiels et il a indiqué que l'accent pouvait être transmis à l'élément, mais cela ne fonctionne pas?

Quelqu'un sait-il pourquoi?

Matériau angulaire - Documents d'entrée

<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

Vos tentatives ne fonctionnent pas car:

  • focused est une propriété qui pilote la classe centrée sur le tapis sur mdInputContainer. Vous pouvez l'utiliser pour savoir si votre contribution est ciblée ou non. Vous ne pouvez pas l'utiliser pour modifier l'état du focus.
  • focus est une méthode sur mdInput qui vous permet de concentrer par programmation l'entrée. Vous pouvez appeler la myInput.focus() avec myInput quelque chose comme ViewChild('myInput') par exemple.

Mais la manière la plus simple de réaliser ce que vous voulez est d'utiliser l'attribut standard autofocus:

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

Avez-vous essayé avec cdkFocusInitial qui spécifiera l'élément qui recevra le focus lors de l'initialisation

la documentation peut être trouvée ici

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>

Puis dans le contrôleur:

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

Ce que fait this.emailInput.focus () est en fait "elementRef.nativeElement.focus ()" https://github.com/angular/material2/blob/master/src/lib/input/input.ts# L287

afin que vous puissiez faire cela comme:

this.emailInput.nativeElement.focus()
5
Mackelito

Je me débattais avec le même problème. J'utilisais F6 pour ouvrir la boîte de dialogue et je n'ai pas pu obtenir le <input> pour se concentrer. Il s'est avéré que je n'empêchais pas le comportement par défaut de F6 et F6 met en évidence la fenêtre URL du navigateur; donc c'était voler l'attention.

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

De plus, aucun attribut de balise magique ne fonctionne. Autofocus, Focused, Focus, peu importe, pas de dés. J'ai dû créer une directive et l'utiliser dans mon élément d'entrée. J'ai obtenu de l'aide avec this answer.

Voici l'élément après avoir ajouté la directive (numberOnly est une autre directive pour l'entrée de nombre uniquement):

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

** Edit: Ajout de code de directive comme suggéré par @Mackelito pour plus de clarté. Voici la directive que j'ai écrite en utilisant la réponse que j'ai liée ci-dessus. Gardez à l'esprit que le matériau a changé le libellé de ses balises en <input matInput> de <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

Vous pouvez généralement définir le focus sans aucun code TypeScript, à l'aide du balisage Template. Mais dans le cas d'une boîte de dialogue, vous devrez utiliser la solution de @ Mackelito avec @ViewChild Et ngAfterViewInit().

J'ai dû concentrer un TextArea qui est à l'intérieur d'un menu, lorsque ce menu apparaît. Heureusement, Menu a un événement (menuOpened) auquel je pouvais me lier.

  <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>

La partie importante ici est le (menuOpened)="newTypes.focus()" Et nous voyons que le newTypes est une variable TemplateRef attachée à la TextArea que je veux mettre en évidence marquée comme <textarea #newTypes.

Voici une capture d'écran qui montre l'ouverture de mon menu et il se concentre immédiatement sur la zone de texte à l'intérieur.

enter image description here

0
H Dog