时间戳

首页 > 解决方案 > 'HTMLInputElement' 类型上不存在属性'touched'

html - 'HTMLInputElement' 类型上不存在属性'touched'

问题描述

<input id="fileTitleVar" type="text" #fileTitleVar>
 <span *ngIf="fileTitleVar.touched && fileTitleVar.blurred">
        Input has been touched
      </span>

'HTMLInputElement' 类型上不存在属性'touched' 'HTMLInputElement' 类型上不存在属性'blurred'

当我使用“ fullTemplateTypeCheck ”选项编译我的角度应用程序时，我可以看到这些错误。

重现此问题 创建一个角度应用程序。

in "*tsconfig.app.json*" file update below code
"angularCompilerOptions": {
    "enableIvy": true,
    "fullTemplateTypeCheck": true
  }

并在 app.component.html 文件中使用上面的代码。当我们运行 ng serve 命令时，它会抛出上述错误。

 <input id="fileTitleVar" type="text" #fileTitleVar>
 <span *ngIf="fileTitleVar.touched && fileTitleVar.blurred">
        Input has been touched
      </span>

当我从“tsconfig.app.json”文件中删除 enableIvy 和 fullTemplateTypeCheck 属性时，错误不应该出现。

标签： htmlangular

解决方案

您需要使用 ngModel 指令使 touch 标志可用：

 <input id="fileTitleVar" type="text" ngModel #fileTitleVar="ngModel">
 <span *ngIf="fileTitleVar.touched">
        Input has been touched
 </span>

正如我记得 ngModel 指令中不存在 blurred 一样，您可以添加[ngModelOptions]="{updateOn: 'blur'}"：

<input id="fileTitleVar" type="text" ngModel [ngModelOptions]="{updateOn: 'blur'}" #fileTitleVar="ngModel">
     <span *ngIf="fileTitleVar.touched">
            Input has been touched
     </span>

也不要忘记导入 FormsModule 以使 ngModel 指令可用。

推荐阅读