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

Question

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

类型“ HTMLInputElement”上不存在“已触摸”属性 属性“模糊”在类型“ HTMLInputElement”上不存在

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

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

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指令使touched标志可用：

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

由于我记得ngModel指令上不存在模糊处理，因此您可以添加[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指令可用。