CODEWITHSUNDEEP
angularjs
MetaDude
MetaDude

Reputation: 149

Angular 2 - clear input value onClick

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.

Upvotes: 3

Views: 9188

Answers (2)

trisek
trisek

Reputation: 789

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>

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222722

just set to empty string instead of null

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

Upvotes: 1

Related Questions