Angular生产构建报错：_touched为AbstractControl私有属性

嘿，这个问题我之前踩过坑！你在模板里直接用了_touched这个私有属性，这就是生产构建失败的核心原因。

问题根源 #

Angular的AbstractControl类（FormControl、FormGroup都是它的子类）里，_touched是私有内部字段，只允许类本身的代码访问。开发环境下类型检查没那么严格，可能不会触发报错，但执行ng build --prod时，Angular会启用严格的类型检查和优化规则，直接访问私有属性就会抛出你看到的错误：

ng-details/billing-details.component.html (40,6)：属性'_touched'为私有属性，仅可在AbstractControl类内部访问。

正确解决方案 #

用Angular官方提供的**公共属性touched**代替私有字段_touched，这是专门给外部代码（包括模板）使用的表单状态属性，完全符合规范。

修改你的HTML模板代码：

<div class="common-error" *ngIf="paymentForm.controls.country.touched && !paymentForm.controls.country.valid">
  Please enter Company Name. (Min 3 char)
</div>

额外小提示 #

Reactive Forms还有几个常用的公共状态属性，你可以放心使用：

• dirty：控件值被修改过
• pristine：控件值从未被修改
• valid：控件验证通过
• invalid：控件验证失败

如果需要手动标记控件为已触碰，可以在组件类里调用markAsTouched()方法，比如：

// 在组件类的某个方法中调用，比如提交表单前触发
this.paymentForm.controls.country.markAsTouched();

这样修改后，再执行ng build --prod就不会报错啦！

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