开启tsconfig.json中strictTemplates后Angular表单失效求助

问题现象 #

在tsconfig.json中开启strictTemplates: true后，Angular表单运行时抛出ReferenceError: res is not defined。即使将该配置设为false，错误依然存在，只有注释掉该配置项才能恢复表单正常功能。已修复编译阶段所有类型错误，项目可正常编译，但运行时触发上述错误。使用Angular版本15.1.3。

相关配置与代码 #

tsconfig.json中的angularCompilerOptions #

"angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "strictTemplates": true // 即使设为false也会影响，必须注释才能恢复
}

FormGroup构建代码 #

public getFormGroup(): LoginForm {
    let fg = this.formBuilder.group<LoginForm['controls']>({
        userName: new FormControl<string>("", Validators.required),
        password: new FormControl<string>("", Validators.required),
        rememberMe: new FormControl<boolean>(true)
    });

    return fg;
}

模板代码 #

<form class="form-horizontal" [formGroup]="loginFormGroup">
    <div class="form-content">
        <fieldset class="k-form-fieldset">
            <kendo-formfield>
                <input formControlName="userName"
                       kendoTextBox
                       #username
                       required
                       tmFocus
                       class="form-control input-underline input-lg "
                       [disabled]="isActing"
                       [placeholder]="'Username' | translate" />
            </kendo-formfield>

            <kendo-formfield>
                <input formControlName="password"
                       [type]="showPassword ? 'text' : 'password'"
                       #passwordRef
                       class="form-control input-underline input-lg"
                       [disabled]="isActing"
                       [placeholder]="'Password' | translate"
                       required />
                <button type="button"
                        kendoButton
                        iconClass="far fa-fw fa-eye"
                        [fillMode]="'clear'"
                        style="position: fixed; transform: translate(-100%, 4px); color: #c7c7c7;"
                        (mouseup)="showPassword = false"
                        (mousedown)="showPassword = true"></button>
            </kendo-formfield>

            <kendo-formfield>
                <div class="form-group" *ngIf="!isInMaintenanceMode">
                    <kendo-label [for]="rememberMeRef"
                                 class="margin-r"
                                 text="{{ 'Remember me' | translate }}"></kendo-label>
                    <kendo-switch formControlName="rememberMe"
                                  #rememberMeRef
                                  [onLabel]="'I'"
                                  [offLabel]="'O'"></kendo-switch>
                </div>
            </kendo-formfield>

            <div class="form-group">
                <button kendoButton
                        type="submit"
                        (click)="onConfirm()"
                        id="button-login"
                        [iconClass]="'far fa-fw fa-sign-in-alt'"
                        [disabled]="isActing">{{ 'Log in' | translate }}</button>
            </div>
        </fieldset>
    </div>
</form>

错误栈信息 #

main.js:34607 LoggingService: res is not defined

Source: ReferenceError
StackTrace:
ReferenceError: res is not defined
at FormGroup._reduceChildren 
at FormGroup._reduceValue 
at FormGroup._updateValue 
at FormGroup.updateValueAndValidity 
at new FormGroup 
at FormBuilder.group 
at LoginComponent.getFormGroup 
at LoginComponent.ngOnInit 
at callHook 
at callHooks 

解决方案 #

该错误是Angular 15.x版本中strictTemplates与表单类型定义不兼容导致的运行时问题，根源是类型收缩引发内部_reduceChildren方法变量未正确初始化。

修复步骤： #

1. 调整FormGroup类型定义方式
   不要直接使用LoginForm['controls']作为泛型参数，改为显式定义表单值类型，用数组语法初始化FormControl，让FormBuilder自动推导控件类型：

   // 定义表单值的类型
   interface LoginFormValue {
     userName: string;
     password: string;
     rememberMe: boolean;
   }
   
   public getFormGroup(): FormGroup<LoginFormValue> {
       return this.formBuilder.group<LoginFormValue>({
           userName: ["", Validators.required],
           password: ["", Validators.required],
           rememberMe: [true]
       });
   }
   

2. 清理缓存并重新构建

   • 执行ng clean清除Angular缓存
   • 重新执行npm install和ng build

3. 验证配置
   重新设置strictTemplates: true，表单应能正常运行，不再抛出错误。

若上述方法无效，建议升级Angular到15.2.x及以上版本，该版本修复了多个strictTemplates相关的表单类型bug。

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