How to Clear Input Field After Submitting Data in Angular

How to clear input field after submitting data in angular?

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 = '';
}

Clear the input box after submitting the form in Angular 4

In app.component.ts file change the follwing code :

import { Component,ViewChild,ElementRef } from '@angular/core';
export class AppComponent {

   @ViewChild("todo") el : ElementRef
   addTodo(todo)
   {
       this.todos.push(todo);
       this.el.nativeElement.value = "";
       return false;
   }
}

By using this,after submitting the form textbox value will be cleared.

Hope, it wil help!

How to clear form after submit in Angular 2?

See also https://angular.io/docs/ts/latest/guide/reactive-forms.html (section "reset the form flags")

>=RC.6

In RC.6 it should be supported to update the form model. Creating a new form group and assigning to myForm

[formGroup]="myForm"

will also be supported (https://github.com/angular/angular/pull/11051#issuecomment-243483654)

>=RC.5

form.reset();

In the new forms module (>= RC.5) NgForm has a reset() method and also supports a forms reset event.
https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<=RC.3

This will work:

onSubmit(value:any):void {
  //send some data to backend
  for(var name in form.controls) {
    (<Control>form.controls[name]).updateValue('');
    /*(<FormControl>form.controls[name]).updateValue('');*/ this should work in RC4 if `Control` is not working, working same in my case
    form.controls[name].setErrors(null);
  }
}

How to clear input field after I run my function in Angular

in your Compponent:

todoText:string='';
timeText:string='';

 addItem(newItem, time) {
    if (newItem != "") {
      this.model.items.push(new TodoItem(newItem, time, false));
    }
    this.todoText='';
    this.timeText=''
}

In your html

<input class="form-control" [(ngModel)]="todoText" />
<input class="form-control" [(ngModel)]="timeText" />
<button class="btn btn-primary m-t-1" (click)="addItem(todoText, timeText)">
   AddItem
</button>

Clear form input field after submit in angularjs..?

You can try reset function which reset your form fields. But this is not the accurate solution. Please provide your Complete controller and HTML code to make an accurate solution.

$scope.resetForm = function(){
   /* reset the data to a new object so that all the properties
    * of form are reset
    */
    $scope.data = {};
  };

UPDATE

Based on the partial HTML code, you can try form controller API setPristine: $scope.FORMNAME.$setPristine();

Replace FORMNAME with your form name. Also make note that as your form is binding a model object to your inputs so, you need to take care of clearing those input model as well:

$scope.formData = {};

Hope this will help to solve your point :)

Reset input value in angular 2

you can do something like this

<input  placeholder="Name" #filterName name="filterName" />
<button (click) = "filterName.value = ''">Click</button>

Template

<input mdInput placeholder="Name" [(ngModel)]="filterName" name="filterName" >
<button (click) = "clear()'">Click</button>

In component

filterName:string;
clear(){
this.filterName = '';
}

Update

If it is a form

easiest and cleanest way to clear forms as well as their error states (dirty , prestine etc)

this.form_name.reset();

for more info on forms read out here

https://angular.io/docs/ts/latest/guide/forms.html

PS: As you asked question there is no form used in your question code
you are using simple two day data binding using ngModel not with
formControl.
form.reset() method works only for formControls reset call

A plunker to show how this will work link.

How to Clear Input Field After Submitting Data in Angular