Hi Kristina,
Greetings from Syncfusion support,
We have validated your reported query, in the Rich Text Editor template driven forms. You can achieve your requirement by enabling/disabling the buttons only if the editor has values. Using the change event in the editor, enable and disable the submit buttons dynamically. We have also prepared a sample that tries to meet your requirements.
Code blocks:
app.component.html
|
<div class="control-section">
<div class="content-wrapper">
<div
id="content"
class="box-form"
style="margin: 0 auto; max-width:750px; padding:25px"
>
<form (ngSubmit)="onSubmit()" #rteForm="ngForm">
<div class="form-group">
<ejs-richtexteditor
#fromRTE
#name="ngModel"
[(value)]="value"
required
name="name"
[(ngModel)]="value"
(created)="rteCreated()"
[saveInterval]="1"
(change)="onChange(fromRTE)"
></ejs-richtexteditor>
<div *ngIf="name.invalid && name.touched" class="alert alert-danger">
<div *ngIf="name.errors.required">Value is required.</div>
</div>
</div>
<div>
<button type="submit" ejs-button [disabled]="disableBtn">
Submit
</button>
<button type="reset" ejs-button style="margin-left: 20px">
Reset
</button>
</div>
</form>
</div>
</div>
</div> |
app.component.ts
|
onChange(args) {
if (args.getText().trim().replace(/\u200B/g, '').length > 0) {
this.disableBtn = false;
} else {
this.disableBtn = true;
}
}
|
Please let us know if the solution helps,
Regards,
Indrajith
