Question

我想用clear按钮创建matFormField（点击时删除输入的值）我不能使用matIcon。所以我改用SVG。当matFormField聚焦时显示清除按钮，否则它将被隐藏。但是，当我点击清除按钮时，matFormField没有聚焦，隐藏了清除按钮，因此按钮不起作用。

<mat-form-field>
  <div class="displayFlex" > 
    <input type="text" matInput [placeholder]="controlName">
    <svg class="clear" (click)="clearInput('control')" fill="#000000" height="17" viewBox="0 0 24 24" width="17" xmlns="http://www.w3.org/2000/svg">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>
  </div>
</mat-form-field>

Answer 1

创建对输入字段的引用，并在单击时将其集中。您可以通过html或组件来完成，首先使用@ViewChild（）获取元素。

HTML解决方案如下：

<mat-form-field>
  <div class="displayFlex" > 
    <input type="text" matInput [placeholder]="controlName" #myInput>
    <svg class="clear" (click)="clearInput('control'); myInput.focus()" fill="#000000" height="17" viewBox="0 0 24 24" width="17" xmlns="http://www.w3.org/2000/svg">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>
  </div>
</mat-form-field>

请注意注释到输入字段的#myInput模板引用变量（可能有您的选择名称），以及通过与SVG元素关联的单击处理程序引用的myInput.focus()调用。

或者，您可以在组件中执行焦点处理。为此，请参考您的输入元素，如下所示。

<mat-form-field>
  <div class="displayFlex" > 
    <input type="text" matInput [placeholder]="controlName" #someName>
    <svg class="clear" (click)="clearInput('control')" fill="#000000" height="17" viewBox="0 0 24 24" width="17" xmlns="http://www.w3.org/2000/svg">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>
  </div>
</mat-form-field>

在组件类中，通过@ViewChild装饰器引用input元素，并调用本机焦点方法调用，如下所示。

export class MyComponent {
    @ViewChild('someName') private inputField:ElementRef;

    ... Your logic here

    clearInput() {
       ... Your current logic
       // Focus on the element
       this.inputField.nativeElement.focus();
       // You can also clear the value of the input element via the inputField reference also
       this.inputField.nativeElement.value = '';
    }
}

详细了解模板参考变量here。

详细了解ViewChild装饰器here。

Answer 2

我找到了解决方案，只是我们（mousedown）而不是（点击）。当发出mousedown时，仍会显示SVG。

单击SVG时，MatFormField不会聚焦

2 个答案: