How to make sure clients have enough words in textarea by using angularjs in order to disable/enable a button?

The Task here is to make sure that the user enters enough words in the Textarea. The button will be enabled or disabled on the basis of the word count entered by the client or user. Here the word limit will be set by admin of the project or Application. If word count lies between the parameter set by Admin then the button will remain enabled. If word count exceeds the limit or is less than the limit then it will remain disabled.

Example: In this approach, we have set parameters to word count between 5 words to 20 words.  

• Here, word count is 1 which is not in 5-20 word range hence button will be disabled. 

Input : GeeksforGeeks
Output: Button will be disabled

• Here, word count is 5 so now button will be enabled. 

Input : Hello Geek! welcome to GeeksforGeeks!! 
Output: Button will be enabled

For reaching the goal we will use InputEvent. That will help us to get a count of words after the input of every character. It is an Angular event binding to respond to any DOM event. It is an asynchronous event that is triggered as the user is interacting with the text-based input controls.

Below all the steps are mentioned order-wise:

• Step 1: Required Angular App and Component(here txtchk component) is created.
• Step 2: In that component html file(here txtxhk.component.html) required html containing a textarea and a button is written
• Step 3: The HTML contains the required TextArea and button which is enabled/disabled depending on the number of works user/client enters.
• Step 4: The (input) binds the data user enters every event which calls the user-defined Checklen() function through which every input $event is passed and this event further used to get input data.
• Step 4: The disabled property of the button is set dynamically using a check variable which is changed according to word count.
• Step 5: In component typescript file the Checklen() function is defined which checks the word count and accordingly set the enabled/disabled property of the button.
• Step 6: There is counter variable c that counts the number of words and check variable is set to "true" or "null" depending on the conditions. Here we have set that minimum word count should be 5 or more and maximum should be 20.
• Step 7: The passed variable event gives the value by event.target.value.
• Step 8: The input value is then splitted by " "(space) and then word count is achieved and stored in c.
• Step 9: This word count is checked by conditions set and then check variable is set to "true" or "null" which further set the property of button to enabled/disabled.

Implementation Example:  

• txtxhk.component.html: 

<textarea (input)="CheckLen($event)" id="ta" ></textarea>
<br>
<button id="bt" disabled={{check}}>Button</button>

• txtxhk.component.ts: 

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

Output: Start the Development server and enter words in textarea to see whether the button goes enabled or disabled on particular outputs. Here are few output Examples with word count values logged on console. 

• The button is disabled because the words are less than 5.

• The button is enabled in this case because the words are more than 5 and less than 21.

• The button is disabled because the words are more than 20.

taran910

Follow

Improve

Article Tags :

• Web Technologies
• AngularJS
• AngularJS-Misc