How to clear input field after submitting data in angular?

Question

I have one mat-select dropdown and one input field. When the button is clicked it submits data. After data is submitted I want to clear the input field but I don't want to clear the mat-select dropdown. How can I do that?

chat.component.html

<div>
  <mat-form-field>
    <mat-select placeholder="Select User" [(ngModel)]="userObject.userid" 
      name="userid" required>
      <mat-option *ngFor="let userObj of userObj [value]="userObj.userid">
        {{userObj.username}}
      </mat-option>
    </mat-select>
  </mat-form-field>  

  <mat-form-field>
    <input matInput placeholder="Type Message" [(ngModel)]="userObject.chatmessage">
  </mat-form-field>

  <button mat-raised-button color="primary" (click)="sendMessage()">
    SEND MESSAGE</button>
</div>

Try userObject.chatmessage = ''; A better way would be to just use a ReactiveForm and then call the reset method on it. — SiddAjmera
– SiddAjmera, Commented Oct 8, 2018 at 7:34

SiddAjmera · Accepted Answer · 2018-10-08 07:41:15Z

3

Since you're two-way data binding to userObject.chatmessage, just setting it to an empty string in your component will do the trick.

In your ChatComponent TypeScript class, just do this:

sendMessage() {
  // After Sending Message
  userObject.chatmessage = '';
}

edited Oct 8, 2018 at 7:41

answered Oct 8, 2018 at 7:38

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SiddAjmera Over a year ago

Glad it helped.

Davoud Over a year ago

If you get the value of input field with $event you can do this (event.target as HTMLInputElement).value = ' ';

Mureke · Accepted Answer · 2018-10-08 07:55:09Z

3

I think you should use Reactive forms and call reset()-method on the form.

You can also manually reset the form fields as suggested above by SiddAjmera.

answered Oct 8, 2018 at 7:55

Mureke

1311 silver badge5 bronze badges

Comments

Akash Gupta · Accepted Answer · 2018-10-08 09:15:17Z

0

I think the Reactive form is the best way to do it, https://angular.io/guide/reactive-forms use this link to do it reset the input field by assigning the empty string is not the way to do that, it will going to give error in some condition

answered Oct 8, 2018 at 9:15

Akash Gupta

3410 bronze badges

Comments

Christian Matthew · Accepted Answer · 2020-06-28 20:03:01Z

0

I think the way to do this while using Reactive form protocols is upon your button click is to .setValue('').

So instead your send message would look like this.

sendMessage() {
   // Operations here prior to resetting value...
   this.userObjectField.setValue('');
}

answered Jun 28, 2020 at 20:03

Christian Matthew

4,4095 gold badges37 silver badges48 bronze badges

Collectives™ on Stack Overflow

How to clear input field after submitting data in angular?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related