如何显示 angularjs material 对另一个模型属性的验证？

Question

使用 angularjs 和 material，我希望能够有一个只读文本框来显示用户查找的选定对象的名称（通过模式弹出窗口），但是文本框验证应按要求显示，如果未填充单独的 id 属性，则会触发验证。这是一个例子 plnkr.

我最初认为我可以简单地通过添加一个带有 ng-model、名称和必需属性的隐藏字段来做到这一点，它会为具有必需验证器的字段创建关联的表单属性 (它确实如此），我将能够像这样在只读文本框中显示验证器：

<form name="myCtrl.myForm" novalidate>
  <input type="hidden" ng-model="myCtrl.id" name="id" required />
  <div layout="row">
    <md-input-container flex="50">
        <label>Selected Object</label>
        <input ng-model="myCtrl.selectedObject.selectedText" readonly />
        <div ng-messages="myCtrl.myForm.id.$error">
            <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>

JS:

vm.select = function(evt) {
  // Set the selected Object
  vm.selectedObject = { selectedText: "Object id 1 selected", id: 1 };
  // Set the associated ID
  vm.id = 1;

};

但是，当提交表单并触发验证时，<div ng-message="required">Please select an object.</div> 永远不会显示。知道我该怎么做吗？

Answer 1

当我输入这个问题时，我有了一个想法 - 也许我应该创建一个自定义验证器，我可以将其应用于引用单独属性的输入。这似乎满足了我的需要。这是 plnkr，这是指令：

angular.module('MyApp', ['ngMessages', 'ngMaterial'])
  .directive('requiredOther', RequiredOther);

function RequiredOther() {

    return {
        require: "ngModel",
        scope: {
            requiredOtherValue: "=requiredOther"
        },
        link: function(scope, element, attributes, ngModel) {
            ngModel.$validators.requiredOther = function(modelValue) {
                return scope.requiredOtherValue !== undefined && scope.requiredOtherValue !== null && scope.requiredOtherValue !== '';
            };

            scope.$watch("requiredOtherValue", function() {
                ngModel.$validate();
            });
        }
    };
}

这是更新后的 HTML:

<form name="myCtrl.myForm" novalidate>
  <input type="hidden" ng-model="myCtrl.id" />
  <div layout="row">
    <md-input-container flex="50">
        <label>Selected Object</label>
        <input name="id" ng-model="myCtrl.selectedObject.selectedText" readonly required-other="myCtrl.id" />
        <div ng-messages="myCtrl.myForm.id.$error">
            <div ng-message="requiredOther">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>

required-other="myCtrl.id" 指令引用 ID 属性并监视更改并在更改时触发验证：
我想我也不再需要隐藏的输入字段了。

如何显示 angularjs material 对另一个模型属性的验证？

How do I show angularjs material validation for another model property?

javascript

angularjs

angularjs-material

如何显示 angularjs material 对另一个模型 属性 的验证？

How do I show angularjs material validation for another model property?

javascript

angularjs

angularjs-material

如何显示 angularjs material 对另一个模型属性的验证？