如何在AngularJS Material中为另一模型属性实现只读框验证？

我明白你的困扰——你想让只读文本框下方显示必填提示，但关联的hidden id字段的验证状态没被正确识别，导致ng-message一直不出来。问题出在AngularJS Material的表单验证关联逻辑上，咱们一步步解决：

问题根源 #

你的hidden输入框和ng-messages不在同一个md-input-container容器里，Material的表单控件状态只会和同容器内的提示组件关联，所以外面的id字段错误状态根本传不到文本框下方的提示区域。

解决方案：把hidden字段移到md-input-container内 #

只需要把hidden的id输入框放到只读文本框所在的md-input-container里，再用ng-hide把它藏起来就行，这样ng-messages就能正确关联到id字段的验证状态了。

修改后的完整HTML代码：

<form name="myCtrl.myForm" novalidate>
  <div layout="row">
    <md-input-container flex="50">
      <label>Selected Object</label>
      <!-- 将hidden输入框移入容器，用ng-hide隐藏 -->
      <input type="hidden" ng-model="myCtrl.id" name="id" required ng-hide="true" />
      <input ng-model="myCtrl.selectedObject.selectedText" readonly />
      <div ng-messages="myCtrl.myForm.id.$error" ng-if="myCtrl.myForm.$submitted || myCtrl.myForm.id.$touched">
        <div ng-message="required">Please select an object.</div>
      </div>
    </md-input-container>
    <div>
      <md-button class="md-icon-button md-primary" ng-click="myCtrl.select($event)">
        <md-tooltip md-direction="top">
          Select Object
        </md-tooltip>
        <md-icon>search</md-icon>
      </md-button>
    </div>
  </div>
  <div>
    <md-button class="md-raised md-primary" type="submit">Submit</md-button>
  </div>
</form>

额外优化点 #

• 添加触发条件：给ng-messages加上ng-if="myCtrl.myForm.$submitted || myCtrl.myForm.id.$touched"，这样只有表单提交过或者字段逻辑上被触碰过才显示提示，避免页面加载就出现错误信息。
• 完善取消选择逻辑：如果用户在弹窗中取消选择，记得把vm.id设为null或undefined，这样验证才会触发：

vm.select = function(evt) {
  // 模拟弹窗取消选择的情况
  // vm.selectedObject = null;
  // vm.id = null;

  // 选中对象的情况
  vm.selectedObject = { selectedText: "Object id 1 selected", id: 1 };
  vm.id = 1;
  // 可选：手动触发表单验证，确保状态及时更新
  vm.myForm.$validate();
};

这样修改后，当你点击提交按钮但id为空时，只读文本框下方就会正确显示"Please select an object."的提示了。

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