如何通过JS/jQuery获取Angular表单输入框的实际输入值

场景说明 #

• 基于SaaS平台的自定义JS能力扩展表单功能，需要对用户录入数据做合法性校验
• 页面已加载jQuery，表单基于AngularJS实现
• 输入框id为动态生成，无法固定使用
• 目标：获取「First Name」表单项的用户实际输入内容（示例值为Andrew）

对应表单项HTML代码如下：

<div class="form-group ng-scope" id="" ng-if="[true, undefined].includes(entitiesDataVisibility['c1b99979-6b13-51a3-9c0e-ccb878e76655'])">
  <label for="field_56657680-c963-45b1-838c-9894dcdb09d0">First Name<span class="required">*</span>
  </label>
  <input id="field_56657680-c963-45b1-838c-9894dcdb09d0" ng-model="entitiesData['c1b99979-6b13-51a3-9c0e-ccb878e76655']" class="form-control ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" type="text" name="6da5a22b-8d81-4f76-9e9b-0441e5d48a39">
</div>

已尝试通过name属性选择器查询元素，执行代码：

console.log($("[name='6da5a22b-8d81-4f76-9e9b-0441e5d48a39']"));

仅返回jQuery封装的元素对象，无法提取元素上的用户实际输入值。

方法1：直接调用jQuery的val()方法（最推荐，适配绝大多数校验场景） #

拿到jQuery元素对象后，直接调用.val()方法即可获取输入框当前的实时输入值，无需读取Angular内部属性：

// 加上input.form-control限定选择器，避免匹配到其他同名元素
const firstName = $("input.form-control[name='6da5a22b-8d81-4f76-9e9b-0441e5d48a39']").val();
console.log(firstName); // 输入为Andrew时，此处输出 "Andrew"

方法2：读取AngularJS ngModel控制器的$viewValue（需要同步获取表单校验状态时使用） #

如果需要同时获取Angular维护的表单校验状态，可先获取输入框绑定的ngModel控制器实例，再读取$viewValue属性：

// 获取输入框对应的ngModel控制器
const ngModelInstance = $("input.form-control[name='6da5a22b-8d81-4f76-9e9b-0441e5d48a39']").controller('ngModel');
// 取用户输入的视图值
const firstName = ngModelInstance.$viewValue;
console.log(firstName); // 输出 "Andrew"
// 可同时获取校验状态，示例：判断当前输入是否合法
console.log('输入是否合法：', ngModelInstance.$valid);

方法3：通过label文本定位（name、id均为动态生成时使用） #

如果后续name属性也会动态变化，可通过「First Name」的label文本关联定位输入框，完全不依赖动态属性：

// 匹配文本为First Name的label标签
const targetLabel = $('label').filter(function() {
  return $(this).text().trim().indexOf('First Name') === 0;
});
// 通过label的for属性找到对应输入框，再取值
const firstName = $('#' + targetLabel.attr('for')).val();
console.log(firstName); // 输出 "Andrew"

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