[英]How can I disable the click button when the editor of ngx-quill is empty in angular?
I am using ngx-quill editor below in which any text can be entered an it will show using a click button.我在下面使用 ngx-quill 编辑器,可以在其中输入任何文本,它会使用单击按钮显示。 The issue that currently I am facing is that I can click the button even I have not entered any text into it and keep going on like below:
目前我面临的问题是,即使我没有输入任何文本,我也可以点击按钮并继续如下所示:
I want that when there is no text inside this editor the button should remain disabled and when I type something it becomes enabled.我希望当此编辑器中没有文本时,按钮应保持禁用状态,而当我键入内容时,它会启用。
below in ts file i have written the function for click button.在下面的 ts 文件中,我为点击按钮编写了 function。
and in html file there is a quill editor and custom button.在 html 文件中有一个羽毛笔编辑器和自定义按钮。 also i am using customToollbar.
我也在使用 customToolbar。 Anyone can help me how I can do this?
任何人都可以帮助我如何做到这一点?
components.ts file components.ts 文件
@ViewChild('editor', { static: false }) editor!: QuillEditorComponent;
public stringMessages: string[] = [];
sendMessage(){
return this.stringMessages.push(this.editor.quillEditor.root.innerHTML)
}
compoenent.html组件.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>
components.ts file - add text field components.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 - add ngModel with text fields and disabled directive component.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.