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

Question

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

“HTMLInputElement”类型上不存在属性“touched” “HTMLInputElement”类型上不存在属性“模糊”

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

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

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 属性时，错误不应该出现。

Answer 1

您需要使用 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 指令可用。