Angular中字段名以点号结尾时验证生效但错误提示不显示

问题原因 #

Angular的FormGroup.get()方法默认会将含点号的字符串解析为嵌套表单控件的路径。当字段名以点号结尾（比如"user.email."）时，get("user.email.")会被解析为查找user控件下的email控件下的空名称控件，导致无法匹配到实际的FormControl，因此错误提示中的control为null，无法渲染提示内容。

解决方案 #

修改错误提示代码中FormGroup.get()的调用方式，使用数组形式的参数传入字段名，让Angular将整个字符串视为单个控件名，而非路径分割：

修改后的错误提示HTML代码 #

<div *ngIf="FormGroup.get([data.labelName]) as control">
  <div *ngIf="(control.touched || control.dirty) && !control.valid">
    <p class="errorMsg" *ngIf="control.errors?.required">This field is required</p>
    <p class="errorMsg" *ngIf="control.errors?.pattern">Please provide a valid email address</p>
  </div>
</div>

补充说明 #

• 构建表单的TypeScript代码无需修改，因为对象属性名支持包含点号（包括结尾），form[ele?.labelName] = new FormControl(...)的方式能正确创建对应控件。
• 数组形式的get()参数适用于所有含特殊字符（点号、斜杠等）的控件名，确保控件匹配准确。

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