What is the best way to clear all content from the "textarea" and input fields after submitting?

I'm currently using a Devextreme library for my project. I am having trouble finding a way to clear all the textarea information in the component along with other inputs when clicking on the Save button.

Despite trying various methods, I have not been successful in clearing the textarea within the component.

If anyone has any suggestions or solutions, I would greatly appreciate the help!

DEMO

CODE

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
    <label for="exampleFormControlInput1">Name</label>
    <input [(ngModel)]="name" type="text" class="form-control">
  </div>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input [(ngModel)]="email" type="email" class="form-control">
  </div>
       <dx-html-editor (onValueChanged)="ment($event)"> 
    <dxi-mention
        valueExpr="text" 
        displayExpr="text"
        [dataSource]="employees"
    ></dxi-mention>
</dx-html-editor>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary" (click)="Save()">Save</button>
        </div>    
      </div>
    </div>
  </div>

Answer №1

To reset the value, you need to obtain the instance/component first (as shown below).

import { DxHtmlEditorComponent } from 'devextreme-angular';

@ViewChild(DxHtmlEditorComponent, {static: false}) dxHtmlEditor;

Save(){
   this.name = null;
   this.email = null;
   this.dxHtmlEditor.instance.reset()
 }

Check out the Working Demo
Learn more by visiting this page

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to handle a global path parameter in a Nest.js application?

Currently, I am in the process of constructing a rest API for a fully multi-tenant system using a single database and application. To achieve this, I have chosen NestJS as my framework of choice. My goal is to structure all modules based on the :tenantID t ...

Troubleshooting: Issue with implementing BehaviorSubject and async pipe in Angular component extension

While working on my code, I encountered an issue where I couldn't get the parent component's async pipe to trigger from a child component in order to update the view. To better explain this problem, let me show you a simplified version of my code ...

Utilize ASP.NET Boilerplate Core and Angular on Microsoft Azure for seamless deployment

I am looking to deploy ASP.NET Boilerplate Core & Angular on Microsoft Azure. The current version of ASP.NET Boilerplate consists of two solutions (one for the backend and one for the frontend), so I need to deploy them on two separate AppServices along wi ...

Icon for TypeScript absent from npm package listings

Recently, I created a package and uploaded it to the npm repository. The package was displayed with an icon labeled "ts" on the website. https://i.stack.imgur.com/LoY1x.png The accompanying package.json showcased the inclusion of the "ts" icon - https:// ...

Guide to implementing a specified directive value across various tags in Angular Material

As I delve into learning Angular and Material, I have come across a challenge in my project. I noticed that I need to create forms with a consistent appearance. Take for example the registration form's template snippet below: <mat-card> <h2 ...

Navigating the world of Angular 5: Essential resources for beginners

My work requires me to learn Angular 5, although Angular 7 is currently the latest version. It seems like Angular 5 may be on its way out and online resources are becoming outdated. Can anyone suggest the best and most up-to-date resources for learning Ang ...

A simple way to automatically fill an input field with a mask when clicking in Angular 2

When a user clicks on this span, the following action is triggered: <span data-content="15" #Fast15 (click)="enterFastTime(Fast15)" class="quick-time">15mins</span> Users can also manually input a date in the following input field. If they ...

The method of having two consecutive subscribe calls in Angular2 Http

Can the Subscribe method be called twice? I am attempting to create an API factory that stores data in the factory and allows different components to use that data for each AJAX call. The factory: export class api { result = []; constructor (p ...

What is the best way to show specific links in the navigation bar only when the user is signed in using Angular?

I'm attempting to customize the navigation bar to display "Sign In" and "Sign Up" buttons only when the user is not signed in, and show the message and profile navigation items when the user is signed in. Below is the provided code snippet: Token Se ...

Display or conceal specific elements within the ngFor loop

Looking for a way to show/hide part of a component in Angular2? Here's an example: <li *ngFor=" #item of items " > <a href="#" (onclick)="hideme = !hideme">Click</a> <div [hidden]="hideme">Hide</div> </li> If ...

Errors can occur when using TypeScript recursive types

Below is a simplified version of the code causing the problem: type Head<T> = T extends [infer U,...unknown[]] ? U : never; type Tail<T> = T extends [unknown,...infer U] ? U : []; type Converter = null; type Convert<T, U extends Converter& ...

Are you a skilled UI Designer looking to work with JHipster?

Just starting out with JHipster and I've generated my first Angular 2 project using JHipster 4.5.1. It's been an amazing journey so far! Now, I'm looking to customize the default JHipster generated Angular 2 pages and create my own custom p ...

Generate an alert with a numerical input field - Ionic

How can I create an input with type number in AlertController? I attempted to implement this, but the input only accepts text and not numbers. const alert = this.alertCtrl.create({ title: 'Add Ingredient', inputs: [ { name: ' ...

Angular 8 - Customizing primeng/fullcalendar Appearance Based on Event Type (Looping Events) and Cell Background Color

This is how I have integrated fullcalendar into my Angular 8 application: calendar.component.ts: export class MyCalendarComponent implements OnInit { public plantedActivities: PlantedActivityModel[] public actuatorActivities: ActuatorActivityModel ...

Can a React.tsx project be developed as a standalone application?

As a student, I have a question to ask. My school project involves creating a program that performs specific tasks related to boats. We are all most comfortable with React.tsx as the programming language, but we are unsure if it is possible to create a st ...

Exploring for JSON keys to find corresponding objects in an array and adding them to the table

I'm currently working on a project where I need to extract specific objects from a JSON based on an array and then display this data in a table. Here's how my situation looks: playerIDs: number[] = [ 1000, 1002, 1004 ] The JSON data that I am t ...

Internet Explorer displays a blank page for the Angular app, while it functions correctly in Google

Currently, I am diving into the world of Angular 4 and have created a basic application using Angular CLI (NG New HelloWorld). When attempting to run ng serve and navigate to http://localhost:4200/, the page loads without issue in Chrome. However, when try ...

Utilizing an Angular component for multiple purposes

For my Angular app, which is component-based and uses Angular version 1.5.5 with TypeScript, I have a header component that includes a country dropdown. This header component is used across multiple pages. However, when a country is selected from the dropd ...

Adjust the Angular menu-bar directly from the content-script of a Chrome Extension

The project I've been working on involves creating an extension specifically for Google Chrome to enhance my school's online learning platform. This website, which is not managed by the school itself, utilizes Angular for its front-end design. W ...

Unveiling the magic: Dynamically displaying or concealing fields in Angular Reactive forms based on conditions

In my current scenario, there are three types of users: 1. Admin with 3 fields: email, firstname, lastname. 2. Employee with 4 fields: email, firstname, lastname, contact. 3. Front Office with 5 fields: email, firstname, lastname, airline details, vendo ...