Как показать валидацию материала angularjs для другого свойства модели? - PullRequest
Новая
       26

Как показать валидацию материала angularjs для другого свойства модели?

1 голос
/ 19 июня 2019

Используя angularjs и материал, я хочу иметь текстовое поле только для чтения, которое отображает имя выбранного объекта, который пользователь ищет (через модальное всплывающее окно), но проверка текстового поля должна отображаться по мере необходимости и запускаться, еслиотдельное свойство id не заполняется.Вот пример plnkr .

Я изначально думал, что я мог бы сделать это, просто добавив скрытое поле с ng-моделью, именем и обязательным атрибутом, это создаст связанный с нимсвойство формы для поля с требуемым валидатором (что он делает), и я мог бы показать валидатор в текстовом поле только для чтения, например: 

<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> никогда не отображается, когда форма отправлена ​​и проверка запускается.Есть идеи, как мне это сделать?

1 Ответ

0 голосов
/ 19 июня 2019

Пока я набирал этот вопрос, у меня возникла идея - возможно, мне следует создать собственный валидатор, который я могу применить к этому входу, который ссылается на отдельное свойство.Это, казалось, делало то, что мне было нужно.Вот 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 и следит заизменяет и запускает проверку при изменении:
Я думаю, мне больше не нужно скрытое поле ввода.

...