Угловая Пользовательские проверки вложенных атрибутов

Question

У меня есть Угловое на основе формы, для которых я хочу, чтобы применить конкретные проверки:

<form name="createProject" novalidate> 
<span ng-show="createProject.projectName.$invalid">Please enter a name for the project.</span></br> 
<input type="text" ng-model="newProject.project.name" name="projectName" placeholder="Project Name" required> 

<div ng-repeat="topic in newProject.project.topics_attributes"> 
    <span>Topic {{$index + 1}}</span> 
    <input type="text" ng-model="topic.name" placeholder="Topic Name"> 
    <input type="text" ng-model="topic.feed_size"> 

    <div ng-repeat="topic_source in topic.topic_sources_attributes"> 
     <span>Topic {{$parent.$index + 1}} Source {{$index + 1}}</span> 
     <select ng-model="topic_source.platform" ng-options="platform for platform in platforms" topic-source-required parent="$parent.topic.name"> 
      <option value="">-- platform --</option> 
     </select> 
     <input type="text" ng-model="topic_source.keywords" placeholder="Topic Keywords" topic-source-required parent="$parent.topic.name"> 
     <button ng-show="$last" ng-click="addTopicSource($parent.topic)">Add Topic Source</button> 
    </div> 
</div> 

<button ng-click="addTopic()">New Topic</button> 
<input type="submit" ng-click="addProject()" ng-class="{ disabled: createProject.$invalid }" ng-disabled="createProject.$invalid" value="Add Project"> 
</form> 

<a href="#">Back</a> 

В форме, проект может иметь ноль или несколько разделов. Каждая тема должна содержать как минимум один источник темы. В принципе, я хочу создать проверку, которая проверяет, добавляется ли тема (добавлено, определяется как имеющая имя), и если это так, то требуется, чтобы она содержала по крайней мере один topic_source с полями платформы и ключевого слова, связанными с ним.

Возможно ли это? Я не очень хорошо знаком с пользовательской проверкой Angular, поэтому я не уверен, как начать реализацию чего-то подобного.

** Редактировать **

Текущий прогресс в директиве пользовательские проверки:

angular.module('dashboard').directive 'topicSourceRequired', ($parse) -> 
    require: "ngModel" 
    link: (scope, elem, attrs, ctrl) -> 
    topicName = $parse attrs.parent 
    scope.$watch topicName, (topicName) -> 
     ctrl.$parsers.unshift checkForExistence if topicName 

    checkForExistence = (topicSource) -> 
     if topicSource 
      ctrl.$setValidity "topicSourceRequired", true 
     else 
      ctrl.$setValidity "topicSourceRequired", false 
     topicSource 

Хорошо, ближе к этой проверке. В настоящее время проверка, похоже, проверяет, имеют ли два поля topic_source значения независимо от того, имеет ли поле имени родителя значение, а поля topic_source регистрируются как недопустимые, если поле было введено и затем стерто.

Как убедиться, что функция checkForExistence вызывается только в том случае, когда topicName имеет непустое строковое значение? Во-вторых, как я могу убедиться, что пустые поля недействительны, не изменяя их каким-то образом?

Answer 1

Вам необходимо создать пользовательскую директиву, для которой требуется ngModel, который дает вам доступ к ngModelController (посмотрите на параметр require при создании директивы).

В принципе, вы можете прослушивать изменения стоимости путем регистрации с $ viewChangeListeners, читать текущее значение из $ viewValue и установить проверку с помощью функции контроллера

$setValidity(validationErrorKey, isValid); 

validationErrorKey установить это логическое значение объекта $ erros контроллера.

Посмотрите на эту страницу в документации, чтобы вы собираетесь: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController