Angular 2 - clear input value onClick

Question

I'm writing a simple angular 2 page that deals with recepies and ingredients. I have two input fiels where the user can enter an ingredient name and a value that will later on will be added to an array. I have read guids that showed how to do what i need but as you'll see below what i have read based on the guids wont work.

Now i have three buttons: 'Add' - add ingredient to the list(array), 'Delete' - delete ingredient from list(array), 'clear' - clears the input value from the input fields.

Expected result: when 'clear' button is pressed, the value that inside both input fields should be cleard. But it dosn't.

this is my Html component:

<div class="container">
<h2>Shopping List</h2>
    <div class="container">
            <form>
              <div class="form-group col-lg-4 col-md-3">
                <label for="recipeName">{{inputTitleName}}</label>
                <input type="textBox" class="form-control" [(ngModel)]="titleValue" id="recipeName">
              </div>
              <div class="form-group col-lg-2 col-md-3">
                <label for="recipeAmount">{{inputTitleAmount}}</label>
                <input type="textBox" class="form-control" [(ngModel)]="amountValue" id="recipeAmount">
              </div>

            </form>
          </div>

          <div>
                <button class="btn btn-success">{{btnAdd}}</button>
                <button class="btn btn-danger">{{btnDelete}}</button>
                <button class="btn btn-primary" (click)="clear()">{{btnClear}}</button>
              </div>

            <br>  
            <br>

          <ul class="list-group">
            <li class="list-group-item">New <span class="badge">{{sListBadge}}</span></li>
            <li class="list-group-item">Deleted <span class="badge">5</span></li> 
            <li class="list-group-item">Warnings <span class="badge">3</span></li> 
          </ul>
 </div>

And this is the ts component:

import { Component } from '@angular/core';


@Component({
  selector: 'shoppingList',
  templateUrl: './shoppingList.component.html',
  styleUrls: ['./shoppingList.component.css']
})
export class ShoppingListComponent {

 inputTitleName = "Name";
 inputTitleAmount = "Amount";

 btnAdd = "Add";
 btnDelete = "Delete";
 btnClear = "Clear";

 sListBadge = "6";


 amountValue: string = '';
 titleValue: string = '';

 clear(){
   this.amountValue = null;
   this.titleValue = null;
  }

}

Edit: one extra thing. i dont know why but with this code in my program the title above the input fields and the names inside the buttons have disappeared and would only appear when i write a character inside one of the input fields.

Shushanth Pallegar · Accepted Answer · 2017-09-21 13:20:29Z

1

just set to empty string instead of null

 clear(){
   this.amountValue = "";
   this.titleValue = "";
 }

edited Sep 21, 2017 at 13:20

Shushanth Pallegar

2,8721 gold badge17 silver badges17 bronze badges

answered Sep 21, 2017 at 13:18

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

MetaDude Over a year ago

tried that, dosn't work. Is every thing else in my code is alright? I mean the way i wrote the method 'clear()' and how i assinged it to the button?

Sajeetharan Over a year ago

yeah looks fine

NoobCoder Over a year ago

What if it is of type number ?

trisek · Accepted Answer · 2017-09-21 21:30:48Z

If you want to use ngModel inside form, you must set name attribute to your input tags.

<div class="container">
<h2>Shopping List</h2>
    <div class="container">
            <form>
              <div class="form-group col-lg-4 col-md-3">
                <label for="recipeName">{{inputTitleName}}</label>
                <input type="textBox" name="first" class="form-control" [(ngModel)]="titleValue" id="recipeName">
              </div>
              <div class="form-group col-lg-2 col-md-3">
                <label for="recipeAmount">{{inputTitleAmount}}</label>
                <input type="textBox" name="second" class="form-control" [(ngModel)]="amountValue" id="recipeAmount">
              </div>

            </form>
          </div>

          <div>
                <button class="btn btn-success">{{btnAdd}}</button>
                <button class="btn btn-danger">{{btnDelete}}</button>
                <button class="btn btn-primary" (click)="clear()">{{btnClear}}</button>
              </div>

            <br>  
            <br>

          <ul class="list-group">
            <li class="list-group-item">New <span class="badge">{{sListBadge}}</span></li>
            <li class="list-group-item">Deleted <span class="badge">5</span></li> 
            <li class="list-group-item">Warnings <span class="badge">3</span></li> 
          </ul>
 </div>

Collectives™ on Stack Overflow

Angular 2 - clear input value onClick

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related