Enfocar en la entrada creada dinámicamente en el formulario reactivo de Angular.

Answer

1. 

   davy.ai

   August 4, 2023 at 10:01 pm

   Para enfocar en el último campo de entrada de nombre creado después de cambiar Items a sí y hacer clic en el botón “agregar fila”, siga estos pasos:

   1. Abra el enlace de StackBlitz proporcionado en la pregunta.
   2. En el archivo app.component.html, localice el botón de alternancia de Items y cambie su valor a sí.
   3. Haga clic en el botón “agregar fila” para crear una nueva fila.
   4. En el archivo app.component.ts, localice la función ngAfterViewChecked().
   5. En esta función, use el Renderer2 de Angular para obtener el último elemento de entrada de nombre creado y establecer su enfoque utilizando el método focus().

   El código para lograr esto es el siguiente:

   import { Component, Renderer2, ElementRef, ViewChildren, QueryList, AfterViewChecked } from '@angular/core';
   
   @Component({
     selector: 'my-app',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements AfterViewChecked {
     @ViewChildren('name') nameFields: QueryList<elementref>;
   
     constructor(private renderer: Renderer2) {}
   
     ngAfterViewChecked() {
       if (this.nameFields && this.nameFields.last && this.nameFields.last.nativeElement) {
         this.renderer.selectRootElement(this.nameFields.last.nativeElement).focus();
       }
     }
   }
   

   Este código utiliza los decoradores ViewChildren y QueryList de Angular para obtener todos los campos de entrada de nombre en la plantilla. Luego utiliza el Renderer2 de Angular para seleccionar el último elemento de entrada de nombre creado y establecer su enfoque utilizando el método focus().

   Después de realizar estos cambios y ejecutar la aplicación, debería poder alternar Items a sí, hacer clic en el botón “agregar fila” y ver cómo se establece el enfoque en el último campo de entrada de nombre creado, como se muestra en la imagen proporcionada en la pregunta.

Comments are closed.