清除按钮作为指令或角度 2-8 中的组件

Posted 2023-02-23

【中文标题】清除按钮作为指令或角度 2-8 中的组件

【英文标题】：Clear Button as a Directive or a Component in angular 2-8

【发布时间】：2020-12-05 21:17:18

【问题描述】：

我想在我的所有输入上放置一个清晰的图标/按钮。是否可以将组件用作具有清除按钮 html 的属性，因为该组件将在所有输入上用作属性选择器

基本上我想将以下代码作为指令或组件作为可重用的属性

关闭

import  Component, OnInit, Input  from '@angular/core';

@Component(
  selector: '[appClearInput]',
  templateUrl: './clear-input.component.html',
  styleUrls: ['./clear-input.component.scss'],
)
export class ClearInputComponent implements OnInit 
  @Input() appClearInput: any;
  @Input() inputs: any;
  constructor() 
    // console.log(this.inputs);
  

  ngOnInit(): void 

  ngAfterViewInit() 
    setTimeout(() => 
      console.log(this.inputs);
    );
  

  clearValue() 
    this.inputs.value = '';
  
`

//ClearInputComponent HTML
<button 
  mat-button
  matSuffix
  mat-icon-button
  aria-label="Clear"
  (click)="clearValue()"
>
  <mat-icon style="font-size: 18px;">close</mat-icon>
</button>
//Using component as attribute

 <mat-form-field fxFlex [ngClass.gt-xs]="'min-ctrl'">
            <input
              matInput
              type="text"
              placeholder="Invoice No"
              formControlName="invoiceNo"
              #inputpurchaseInvoiceNo
              maxlength="80"
              [appHighlight]="'yellow'"
              [appClearInput]="inputpurchaseInvoiceNo"
                       />

【问题讨论】：

我相信不需要创建单独的组件或指令仅用于清除字段值它应该是一种方法，您可以在其中传递表单控件并将值设置为 null 单击即 (click)="clearValues(form.get('fieldName'))"

感谢您的回复，但我如何在输入字段上获得 X 图标

您需要输入框旁边的X图标还是右上角的输入框内部？您可以创建一个共享组件，该组件可以在单击时发出输出事件，您可以在其中使用发出的事件并清除输入值。

输入框内

我应该提出一个解决方案还是你已经完成了？

【参考方案1】：

        import 
      Component,
      OnInit,
      Input,
      ElementRef,
      Renderer2,
      ViewChild,
      AfterViewInit,
      HostListener,
     from '@angular/core';
    
    @Component(
      selector: 'input[type="text"],input[type="password"],input[type="number"],input[type="text"][ngModel]',
      templateUrl: './clear-input.component.html',
      styleUrls: ['./clear-input.component.scss'],
    )
    export class ClearInputComponent implements AfterViewInit 
      constructor(private el: ElementRef, private renderer: Renderer2) 
    
      ngAfterViewInit() 
        const clearInputBtn = document.getElementById(
          'food-name-val'
        ) as HTMLInputElement;
        this.renderer.appendChild(
          this.el.nativeElement.parentElement,
          clearInputBtn
        );
        this.renderer.listen(clearInputBtn, 'click', () => 
          this.el.nativeElement.value = '';
        );
      
    
      @HostListener('focus') onFocus() 
        this.el.nativeElement.select();
        
    

<button
      #clearInputBtn
      id="food-name-val"
      mat-button
      matSuffix
      mat-icon-button
      aria-label="Clear"
      class="icon-close"
    >
      <mat-icon style="font-size: 18px;">close</mat-icon>
    </button>