时间戳

首页 > 解决方案 > 将输入集中在自定义 Angular MatFormFieldControl 中

angular - 将输入集中在自定义 Angular MatFormFieldControl 中

问题描述

如何让我的父组件专注于页面加载时asset1自定义的输入字段*？MatFormFieldControl

父组件 HTML：

    <mat-form-field class="symbol">
      <symbol-input
        name="symbol"
        placeholder="Symbol"
        ngModel
        #symbolInput="ngModel"
        [(ngModel)]="symbol"></symbol-input>
    </mat-form-field>

自定义MatFormFieldControlHTML：

<div [formGroup]="parts">
  <input class="asset1" formControlName="asset1" size="12">
  <span class="input-spacer">&frasl;</span>
  <input class="asset2" formControlName="asset2" size="12">
</div>

*我假设我将AfterViewInit在父组件中实现并希望触发一个focus会逐渐下降的事件？

标签： angularangular6angular7

解决方案

@IvanS95 为我指明了正确的方向。

ViewChild在我的父组件中添加了一个：

@ViewChild(SymbolInputComponent) set focus(sic: SymbolInputComponent) {
    sic.autofocus = true;
};

然后我在我的自定义中添加了一个设置为 falseMatFormFieldControl的公共变量。autofocus如果我需要在给定页面上多次使用此字段。

然后我添加autofocus到我的MatFormFieldControl模板中：

<div [formGroup]="parts">
  <input class="asset1" formControlName="asset1" size="12" [autofocus]="autofocus">
  <span class="input-spacer">&frasl;</span>
  <input class="asset2" formControlName="asset2" size="12">
</div>

推荐阅读