在angular2中输入空格以外的字符时启用按钮

Posted 2023-05-07

【中文标题】在angular2中输入空格以外的字符时启用按钮

【英文标题】：Enable button on entering a character other than space in angular2

【发布时间】：2017-07-16 05:19:38

【问题描述】：

我有一个文本区域形式的评论部分，如果用户开始在文本区域中输入一些字符（空格除外），我想启用另一个按钮。我怎样才能在 angular2 中做到这一点？

我已经让它工作了，但我的问题是即使用户在文本区域输入“空格”，按钮也会启用。我该如何纠正这种行为，以便只有当用户写东西时按钮才会启用？

在 html 中：

<textarea id="comments"
   class="comments-text"
   [(ngModel)]="text"
   (ngModelChange)="onAddComment($event)"
   name="text"></textarea>

<button [disabled]="EnableButton()">

在组件中：

 public onAddComment(event: string): void 
    this.passedString = event;
    

 public EnableButton(): void 
    return !!this.passedString;

【问题讨论】：

能看到你的代码吗？

刚刚添加了代码，感谢您的帮助

按钮元素的代码是..

已更新。这是有效的，除了我想要的，如果只有空格输入按钮没有被启用。我该怎么做？

查看我的答案。

【参考方案1】：

buttonIsDisabled:boolean=true;
public onAddComment(event: string): void 
   this.buttonIsDisabled=true;
   let passedString = event;
   if (/\S/.test(passedString)) 
       // string is not empty and not just whitespace
       // activate button
       this.buttonIsDisabled=false;
   

<button [disabled]="buttonIsDisabled">

这应该可以解决问题。看 How can I check if string contains characters & whitespace, not just whitespace?

【讨论】：

抱歉这个愚蠢的问题，什么是 /\S/ ？

这是一个正则表达式：\S：“匹配除空格之外的单个字符。”见developer.mozilla.org/en/docs/Web/javascript/Guide/…

【参考方案2】：

您可以检查每个textarea 值更改是否包含除空格以外的任何其他符号。

onAddComment() 
  if (this.text.replace(/\s/g, '').length == 0) 
    this.check = true;
   else 
    this.check = false;
  

Plunker

【讨论】：

如果有句子并且它之间有空格，这将不起作用。我只想在所有字符串都是空格时禁用

@AlreadyLost 我明白了。如果内容中只有空格，则必须禁用它。现在可以了。

【参考方案3】：

trim() 可用于删除空格。