Podemos enfocarnos en cualquier campo de entrada automáticamente usando las directivas angulares. Aquí creamos una directiva personalizada que puede enfocarse automáticamente en cualquier campo del formulario.
Crear una directiva personalizada es como crear un componente Angular. Para crear una directiva personalizada, debemos reemplazar el decorador @Component con el decorador @Directive .
Acercarse :
- Cree la aplicación Angular que se utilizará.
- Cree una directiva «AutoFocus» que maneje el enfoque automático de los campos de entrada. En esta directiva, establezca el elemento HTML como enfocado.
- Luego importe esta directiva dentro de app.module.ts y agréguela a la lista de proveedores.
- Cree un formulario simple en el que establezcamos el campo de entrada como centrado en la recarga de la página. Entonces, hemos creado un formulario de registro con dos campos de entrada «correo electrónico» y «contraseña» y agregamos la directiva «enfoque automático» al campo de entrada «correo electrónico» y luego este campo se enfoca automáticamente en la recarga de la página.
Sintaxis: debajo de «enfoque automático» dentro del campo de entrada hay una directiva para enfocar automáticamente este campo de entrada.
<input autofocus type="email" name="email" #email="ngModel" ngModel />
Entonces, creemos nuestra directiva personalizada simple «AutoFocus» que maneja el enfoque automático del campo de entrada.
Ejemplo:
auto-focus.directive.ts
import {AfterViewInit, Directive,ElementRef} from '@angular/core'
@Directive({
selector:'autofocus'
})
export class AutoFocus implements AfterViewInit{
constructor(
private elementRef: ElementRef
){}
ngAfterViewInit(){
this.elementRef.nativeElement.focus();
}
}
En el código anterior, hemos creado una directiva «enfoque automático» aquí «enfoque automático» es el nombre/selector de esta directiva, y siempre que queramos usar esta directiva tenemos que proporcionar el selector. Estamos utilizando el enlace de ciclo de vida angular «ngAfterViewInit» que hace que el elemento se centre después de la inicialización de la vista.
Ahora debemos asegurarnos de que angular conozca nuestra directiva recién creada, por lo que debemos proporcionarla dentro del archivo «app.module.ts» .
app.module.ts
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AutoFocus } from './auth/signup/autofocus.directive';
@NgModule({
declarations: [
AppComponent,
AutoFocus
],
imports: [],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule { }
Así que aquí hemos proporcionado la directiva «AutoFocus» dentro de la array «declaraciones» y nos aseguramos de importarla también.
Ahora tenemos que crear un campo de entrada en el que vamos a aplicar esta directiva de enfoque automático. Para esto, hemos creado un formulario de registro simple y en este usuario de formulario, el campo de entrada de correo electrónico se enfoca automáticamente en la recarga de la página.
signup.component.html
<form (submit)="onSignup(form)" #form="ngForm" > <mat-card> <mat-form-field> <!-- AutoFocus directive applied in the below input field --> <input autofocus type="email" matInput name="email" #email="ngModel" ngModel /> </mat-form-field> <mat-form-field> <input ngModel #password="ngModel" type="password" matInput placeholder="Password" name="password"> </mat-form-field> <button type="submit" mat-raised-button color="primary"> <span>SignUp</span> </button> </mat-card> </form>
<input autofocus type="email" matInput
name="email" #email="ngModel" ngModel />
Entonces, en el formulario anterior, la directiva de «enfoque automático» se proporciona en el campo de entrada de correo electrónico y este campo se enfoca automáticamente en la recarga de la página.
Producción :
