Form input field not cleared after submit

Ionic Framework ionic-v3
1

Hi all,

I have a input field which triggers some part in the .ts file, all is ok but I noticed that when I submit the input the typed text is not cleared:

html form:

<form >
      		<ion-item>
        		<ion-label>Nodig:</ion-label>
        		<ion-input ngController="alert" [(ngModel)]="title" name="title"></ion-input>
      		</ion-item>
      		<button ion-button (click)="onSubmit()" name="add" block>Toevoegen</button>
    	</form>

ts file:

onSubmit(title) {  
		this.todoService.add(this.title, []).subscribe(
			response => {
     			let todo: Todo = {
                  name: this.title,
                  done: false,
                  tags: []
                };
                this.todos.unshift(todo)
				
			  }         
);
}

I guess I forget something and it is very simple but maybe somebody can help :slight_smile:

2

You have bound the <ion-input> to the title property of your controller, so upon a successful submission, you could simply assign an empty string or null or undefined to title and that should be reflected in the state of the <ion-input>.

When forms get bigger, you might want to look into using Angular’s reactive forms, which can easily be reset completely with a single reset() call (and also offer other useful features like validation).