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 oreder-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:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • txtxhk.component.ts:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    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.



    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.