typescript 当ngx-quill编辑器的Angular 为空时，我如何禁用点击按钮？

pu82cl6c 于 2022-12-30 发布在 TypeScript

关注(0)|答案(1)|浏览(112)

我正在使用下面的ngx-quill编辑器，其中任何文本都可以输入，它将显示使用点击按钮.目前我面临的问题是，我可以点击按钮，即使我没有输入任何文本，并继续如下：

我希望当这个编辑器中没有文本时，按钮应该保持禁用状态，当我键入一些内容时，它将变为启用状态。
在下面的ts文件中，我编写了单击按钮的函数。
在html文件中有一个羽毛笔编辑器和自定义按钮。我也使用自定义工具栏。任何人都可以帮助我如何做到这一点？
组件.ts文件

@ViewChild('editor', { static: false }) editor!: QuillEditorComponent;

public stringMessages: string[] = [];

sendMessage(){ 
    return this.stringMessages.push(this.editor.quillEditor.root.innerHTML)
  }

compoenent.html

<quill-editor customToolbarPosition="bottom"  id="quill-id" #editor placeholder="Type your message..."  [styles]="toolbarStyle">

<span class="ql-formats-send">
                <button class="ql-send-button" (click)="sendMessage()"><fa-icon [icon]="faMessage"></fa-icon></button>
            </span>

</quill-editor>

typescript

来源：https://stackoverflow.com/questions/74939513/how-can-i-disable-the-click-button-when-the-editor-of-ngx-quill-is-empty-in-angu

1条答案

按热度按时间

zhte4eai1#

组件.ts文件-添加文本字段

@ViewChild('editor', { static: false }) editor!: QuillEditorComponent;

public text: string | undefined;
public stringMessages: string[] = [];

sendMessage(){
    if (!this.text) {
        return;
    }
    return this.stringMessages.push(this.editor.quillEditor.root.innerHTML)
  }

compoenent.html -添加带有文本字段和禁用指令的ngModel

<quill-editor [(ngModel)]="text" customToolbarPosition="bottom"  id="quill-id" #editor placeholder="Type your message..."  [styles]="toolbarStyle">

<span class="ql-formats-send">
                <button class="ql-send-button" (click)="sendMessage()" [disabled]="!text"><fa-icon [icon]="faMessage"></fa-icon></button>
            </span>

</quill-editor>

赞(0）回复(0）举报 2022-12-30

我来回答

typescript 当ngx-quill编辑器的Angular 为空时，我如何禁用点击按钮？

1条答案

相关问题

热门标签

最新问答