Question

当用户勾选复选框时，是否有快速解决方案可以移除true/false框中的input值，以便显示默认placeholder而不是值true/false

希望可以使用inline字段使用input代码来完成，我们的想法就是隐藏/显示文字，但当checkbox为true时它会放置输入框中的值

查看示例： https://plnkr.co/edit/TWnTY3oXYGlcSSIJFGqi?p=preview

Answer 1

试试此代码

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

Answer 2

哟可以尝试更改复选框的模型，如“＆＃34;已检查＆＃34;

”

<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>

您可以查看此Plank

Answer 3

更改您的代码如下：

<强> 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>

<强>组件（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;
    }
  }
}

Angular 2删除输入中的true / false值

3 个答案: