Angular 17与Angular Material中焦点及失焦状态管理问题求助

一、登录模块Code输入框自动获焦问题 #

问题根源 #

• @ViewChild('code')绑定的是模板引用变量，但HTML中仅给input设置了id='code'，未声明对应的模板变量#code，导致无法通过ViewChild获取目标元素
• 启用表单控件后，Angular变更检测未同步完成，直接调用focus会因控件状态未更新而失效

修正方案 #

1. 修改HTML，给input添加模板引用变量#code：

<mat-form-field class="codeField" >
    <mat-label>Code</mat-label>
    <span matPrefix> &nbsp;</span>
    <input type="text" matInput placeholder="00-00" mask="00-00" 
           formControlName="codeField" #code>
</mat-form-field>

2. 修改TS代码，注入ChangeDetectorRef确保变更检测完成后调用focus：

import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatInput } from '@angular/material/input';

@Component({...})
export class YourComponent {
    @ViewChild('code') code!: MatInput;
    
    constructor(private cdr: ChangeDetectorRef) {}

    // 接口请求回调逻辑
    if (response.body.result) {
        this.frm.controls['codeField'].enable();
        // 强制触发变更检测，确保控件状态更新完成
        this.cdr.detectChanges();
        // 调用MatInput的focus方法
        this.code.focus();
    }
}

二、地址选择后输入框失焦问题 #

问题根源 #

• @ViewChild('address')获取的是MatAutocomplete组件，但需要失焦的是输入框元素，而非自动完成组件本身
• TS中变量名与模板引用变量不匹配，且类型声明错误

修正方案 #

1. 修正TS中的ViewChild声明，获取输入框的ElementRef：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({...})
export class YourComponent {
    // 变量名与模板引用保持一致，类型指定为输入框元素
    @ViewChild('addressInput') addressInput!: ElementRef<HTMLInputElement>;

    address_is_selected(event: any) {
        // 调用输入框的blur方法触发失焦
        this.addressInput.nativeElement.blur();
    }
}

2. HTML部分无需修改（已正确声明#addressInput模板变量）：

<mat-form-field layout-align='center center'>
    <input matInput placeholder="address" aria-label="address" [matAutocomplete]="address"
           formControlName="adress" #addressInput/>
    <mat-autocomplete #address="matAutocomplete" id="address" (optionSelected)="address_is_selected($event.option.value)">
        <mat-option *ngFor="let address of filteredaddress | async" [value]="address">
            <span> {{ address}}</span>
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

内容的提问来源于stack exchange，提问作者Ermak