CODEWITHSUNDEEP
javascriptangular
nCore
nCore

Reputation: 2087

Angular 2 remove true/false value in input

Is there a quick solution to remove the true/false value in the input box when user tick the checkbox so it would show the default placeholder instead of the value true/false.

hoping it can be done usinginline code with the input field, the idea is just to hide/show the text but when the checkbox is true it puts that value in the input box

see the example: https://plnkr.co/edit/TWnTY3oXYGlcSSIJFGqi?p=preview

Upvotes: 0

Views: 2009

Answers (3)

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14679

Change Your Code as below:

HTML:

<label>Name:</label>
<!-- data-bind to the input element; store value in yourName -->
<input type="text" [(ngModel)]="yourName" (ngModelChange)="valuechange($event)"  placeholder="Enter a name here">
<input type="checkbox" [(ngModel)]="isChecked" placeholder="Enter a name here">
<hr>
<!-- conditionally display `yourName` -->
<h1 [hidden]="isChecked==false || isChecked==null">Hello {{yourName}}!</h1>

Component(ts)

export class HelloWorld {
  isChecked:boolean=false;
  // Declaring the variable for binding with initial value
  yourName: string = '';

  valuechange(newValue) {
    mymodel = newValue;
    if(mymodel!='')
    {
      this.isChecked=true;
    }
    else
    {
      this.isChecked=false;
    }
  }
}

Upvotes: 0

Viplock
Viplock

Reputation: 3319

Yo can try changing the model for check box To something else like "checked"

<label>Name:</label>
 <!-- data-bind to the input element; store value in yourName -->
 <input type="text" [(ngModel)]="yourName" placeholder="Enter a name here">
     <input type="checkbox" [(ngModel)]="checked" placeholder="Enter a name here">
      <hr>
    <!-- conditionally display `yourName` -->
  <h1 [hidden]="!checked || !yourName|| checked==null ">Hello {{yourName}}!</h1>

You can check this plank Plank

Upvotes: 2

Murali
Murali

Reputation: 324

Try this code

Html 

<label>Name:</label>
<!-- data-bind to the input element; store value in yourName -->
<input type="text" [(ngModel)]="yourName" placeholder="Enter a name here">
<input type="checkbox" [(ngModel)]="reset" placeholder="Enter a name here" (click)="removeModelValue()">
<hr>
<!-- conditionally display `yourName` -->
<h1 [hidden]="!reset">Hello {{yourName}}!</h1>

ts 

export class HelloWorld {
  // Declaring the variable for binding with initial value
  yourName: string = '';
  reset: boolean = true;
  removeModelValue() {
     this.yourName = '';
  }
}

Upvotes: 2

Related Questions