如何通过使用angularjs来确保客户端在textarea中有足够的单词来禁用/启用按钮？

此处的任务是确保用户在Textarea中输入足够的单词。该按钮将根据客户端或用户输入的字数来启用或禁用。在这里，字数限制将由项目或应用程序的管理员来设置。如果字数介于Admin设置的参数之间，则该按钮将保持启用状态。如果字数超过限制或小于限制，则它将保持禁用状态。

示例：在这种方法中，我们将参数设置为5到20个字之间的字数。

• 在此，字数为1，不在5-20字范围内，因此按钮将被禁用。

  Input : GeeksforGeeks
  Output: Button will be disabled
  

• 在这里，字数为5，因此现在将启用按钮。

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

为了达到目标，我们将使用InputEvent 。这将有助于我们在输入每个字符后获得单词计数。这是一个Angular事件绑定，用于响应任何DOM事件。这是一个异步事件，当用户与基于文本的输入控件进行交互时触发。

下面是按步骤列出的所有步骤：

步骤1：创建了必需的Angular应用和组件(此处为txtchk组件)。

步骤2：在该组件html文件(此处为txtxhk.component.html )中，编写包含文本区域和按钮的所需html。

步骤3： HTML包含必需的TextArea和按钮，该按钮是否启用取决于用户/客户输入的作品数量。

步骤4 ：(输入)绑定数据，用户输入每个事件，该事件调用用户定义的Checklen()函数，通过该函数传递每个输入$ event ，此事件进一步用于获取输入数据。

步骤4：使用检查变量动态设置按钮的Disabled属性，该检查变量根据字数进行更改。

步骤5：在组件打字稿文件中，定义Checklen()函数，该函数检查字数并相应地设置按钮的enabled / disabled属性。

步骤6：有一个计数器变量c ，用于对单词数进行计数，并且根据条件将校验变量设置为“ true”或“ null” 。在这里，我们设置的最小字数应为5个或更多，最大字数应为20。

步骤7：传递的变量事件通过event.target.value给出值。

步骤8：然后将输入值除以“”(空格)，然后获得字数并将其存储在c中。

步骤9：通过设置条件检查此字数，然后将检查变量设置为“ true”或“ null”，这进一步将按钮的属性设置为启用/禁用。

实施示例：

• txtxhk.component.html：

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

输出：启动开发服务器，并在文本区域中输入单词，以查看该按钮在特定输出上是启用还是禁用。这是一些在控制台上记录了字数值的输出示例。

• 该按钮被禁用，因为单词少于5个。
• 在这种情况下，启用按钮是因为单词大于5且小于21。
• 该按钮被禁用，因为单词数超过20。