Angular

Question

我有一个输入字段，用户可以在其中输入文本。我在输入字段的左侧有一个 x 符号。我试图在单击符号时清除文本但无法这样做。另外 input tfFormInput 是来自 npm 库的自定义文本

我试过使用 ngModel 但对我不起作用

我应该在 remove 方法中添加什么才能使其工作？

  <div class="placeholder"><input tfFormInput />
    </div>


    <div class="im-target-param-row-delete" (click)="remove()"  [(ngModel)]="searchValue">
        <div class="close-ctnr">
            <svg viewBox="0 0 10 10">
                <line x1="1" y1="1" x2="9" y2="9"/>
                <line x1="1" y1="9" x2="9" y2="1"/>
            </svg>
        </div>
    </div>

.ts

export class SearchComponent implements OnInit {

  searchValue:string = '';


 removeSelectedSpecification(){
    this.searchValue = '';

  }
}

Answer 1

你可以尝试这样的事情。将搜索值移动到输入元素。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" placeholder="Search..." [(ngModel)]="searchValue">
      <button (click)="clearSearch()">Clear</button>
    </div>
  `,
})
export class App {
  searchValue:string = null;
  clearSearch() { 
    this.searchValue = '';
    console.log(this.searchValue.length, this.searchValue, typeof(this.searchValue));
  }
}

Answer 2

NgModel 应该像下面这样输入。

<div class="placeholder"><input tfFormInput [(ngModel)]="searchValue"/>
    </div>


    <div class="im-target-param-row-delete" (click)="remove()">
        <div class="close-ctnr">
            <svg viewBox="0 0 10 10">
                <line x1="1" y1="1" x2="9" y2="9"/>
                <line x1="1" y1="9" x2="9" y2="1"/>
            </svg>
        </div>
    </div>


remove() { this.searchValue = ''; }

Answer 3

这样试试：

html 文件:

<div>
       <input type="text" placeholder="Search..." [(ngModel)]="searchValue">
       <button (click)="remove()">X</button>
</div>

ts 文件：

export class SearchComponent implements OnInit {

  searchValue:string = '';
    
 remove(){
    this.searchValue = '';

  }
}

Angular - 单击 "x" 时清除输入文本

Angular - Clear Input text when click on "x"

html

javascript

reset

typescript