Angular动态设置input的name属性及正则校验失效问题排查

首先，我注意到你的代码里混用了AngularJS（比如ng-pattern）和Angular（比如[(ngModel)]）的语法，这是导致错误提示不触发的核心原因之一，另外表单的模板引用方式也需要调整。咱们一步步来解决：

1. 修正表单模板引用和指令语法 #

Angular中要获取表单实例，需要给form标签添加#myForm="ngForm"，同时ng-pattern是AngularJS的指令，Angular里应该用[pattern]绑定正则表达式。另外，[name]="addVas.name"是正确的动态绑定name属性的方式，比插值更可靠。

修正后的模板代码：

<form novalidate #myForm="ngForm">
  <!-- 错误提示：先判断控件是否存在再访问错误状态 -->
  <div *ngIf="myForm.get(addVas.name)?.hasError('pattern')">
    请输入数字字符
  </div>
  <div class="form-group">
    <input 
      type="text" 
      [(ngModel)]="addVas.input" 
      [disabled]="addVas.disabled" <!-- Angular中直接用[disabled]绑定布尔值，无需attr -->
      [name]="addVas.name" 
      [pattern]="'/^[0-9]+$/" <!-- 正则加+$确保输入全为数字，而非仅开头是数字 -->
      (blur)="addAdnlVasAfterInput(addVas)" 
      placeholder="Provide value of shipment" 
      class="form-control"
    >
    <!-- 临时显示绑定的name值，快速确认是否传递正确 -->
    <span>当前控件name：{{ addVas.name }} | 表单中存在该控件：{{ myForm.contains(addVas.name) }}</span>
  </div>
</form>

2. 确认name属性是否正确传递的方法 #

除了模板里的临时提示文本，你还可以通过以下方式验证：

• 打开浏览器开发者工具（F12），定位到对应的input元素，查看它的name属性值是否与addVas.name一致；
• 在组件的addAdnlVasAfterInput方法中打印表单控件信息（记得先通过@ViewChild('myForm') myForm!: NgForm;获取表单实例）：

  addAdnlVasAfterInput(addVas: any) {
    console.log('绑定的控件name:', addVas.name);
    console.log('表单中对应的控件实例:', this.myForm.get(addVas.name));
  }
  

3. 关键修改点说明 #

• 替换ng-pattern为Angular原生的[pattern]指令，正则表达式要匹配完整输入（加+$），避免部分符合就不触发错误；
• 表单必须添加#myForm="ngForm"，否则myForm只是普通DOM元素引用，无法获取表单控件的状态；
• 错误提示用*ngIf="myForm.get(addVas.name)?.hasError('pattern')"，先通过get方法安全获取控件，再访问错误状态，防止控件未初始化时报错；
• [disabled]直接绑定布尔值即可，Angular会自动处理属性的添加与移除，无需使用[attr.disabled]。

这样修改后，当用户输入非数字字符时错误提示会正常显示，同时你也能直观确认name属性是否正确传递。

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