La tarea aquí es asegurarse de que el usuario ingrese suficientes palabras en el área de texto. El botón se activará o desactivará en función del recuento de palabras introducido por el cliente o usuario. Aquí, el administrador del proyecto o la aplicación establecerá el límite de palabras. Si el recuento de palabras se encuentra entre el parámetro establecido por el administrador, el botón permanecerá habilitado. Si el recuento de palabras supera el límite o es inferior al límite, permanecerá deshabilitado.
Ejemplo: en este enfoque, hemos establecido parámetros para contar palabras entre 5 y 20 palabras.
- Aquí, el recuento de palabras es 1, que no está en el rango de 5 a 20 palabras, por lo que el botón se desactivará.
Input : GeeksforGeeks Output: Button will be disabled
- Aquí, el recuento de palabras es 5, por lo que ahora se habilitará el botón.
Input : Hello Geek! welcome to GeeksforGeeks!! Output: Button will be enabled
Para alcanzar la meta usaremos InputEvent . Eso nos ayudará a obtener un recuento de palabras después de la entrada de cada carácter. Es un enlace de evento Angular para responder a cualquier evento DOM. Es un evento asincrónico que se activa cuando el usuario interactúa con los controles de entrada basados en texto.
A continuación se mencionan todos los pasos en orden:
- Paso 1: se crea la aplicación angular y el componente requeridos (aquí el componente txtchk ).
- Paso 2: en ese archivo html de componente (aquí txtxhk.component.html ) se requiere html que contiene un área de texto y se escribe un botón
- Paso 3: El HTML contiene el área de texto requerida y el botón que se habilita/deshabilita según la cantidad de trabajos que ingresa el usuario/cliente.
- Paso 4: La (entrada) vincula los datos que el usuario ingresa en cada evento que llama a la función Checklen() definida por el usuario a través de la cual se pasa cada evento $de entrada y este evento se usa para obtener datos de entrada.
- Paso 4: la propiedad deshabilitada del botón se establece dinámicamente mediante una variable de verificación que se cambia según el recuento de palabras.
- Paso 5: en el archivo TypeScript del componente, se define la función Checklen() que verifica el recuento de palabras y, en consecuencia, establece la propiedad habilitada/deshabilitada del botón.
- Paso 6: hay una variable de contador c que cuenta el número de palabras y la variable de verificación se establece en «verdadero» o «nulo» según las condiciones. Aquí hemos establecido que el recuento mínimo de palabras debe ser de 5 o más y el máximo debe ser de 20.
- Paso 7: El evento variable pasado da el valor por event.target.value.
- Paso 8: el valor de entrada luego se divide por «» (espacio) y luego se logra el conteo de palabras y se almacena en c.
- Paso 9: este recuento de palabras se verifica mediante las condiciones establecidas y luego la variable de verificación se establece en «verdadero» o «nulo», lo que establece aún más la propiedad del botón en habilitado/deshabilitado.
Ejemplo de implementación:
- txtxhk.componente.html:
HTML
<textarea (input)="CheckLen($event)" id="ta" ></textarea>
<br>
<button id="bt" disabled={{check}}>Button</button>
- txtxhk.component.ts:
Javascript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-txtchk',
templateUrl: './txtchk.component.html',
styleUrls: ['./txtchk.component.css']
})
export class TxtchkComponent implements OnInit {
c=0; //defined counter
constructor() { }
check; //defined check variable
ngOnInit(): void {
}
//value of textarea is taken from event
CheckLen(event){
// c counts the number of words of input value
this.c=event.target.value.split(' ').length;
// We have set that minimum word count should
// be 5 or more and the maximum should be 20.
if(this.c<5 || this.c>20){
this.check=true;
}
if(this.c<=20 && this.c>=5){
this.check=null;
}
}
}
Salida: inicie el servidor de desarrollo e ingrese palabras en el área de texto para ver si el botón se habilita o deshabilita en salidas particulares. Aquí hay algunos ejemplos de salida con valores de conteo de palabras registrados en la consola.
- El botón está deshabilitado porque las palabras son menos de 5.
- El botón está habilitado en este caso porque las palabras son más de 5 y menos de 21.
- El botón está deshabilitado porque las palabras son más de 20.
