Необходимо реализовать валидатор для формы
Столкнулся в коде вот с такой структурой формы:
<my-form>
<my-errors></my-errors>
<my-input name="username" type="username" label="Имя" required></my-input>
<my-input name="password" type="password" label="Пароль" required></my-input>
<my-input name="phone" type="phone" label="Телефон"></my-input>
<my-input name="email" type="email" label="Email"></my-input>
<button class="btn btn-success btn-block">Отправить</button>
</my-form>
То есть директивы вложены непосредственно друг в друга. Как я понял из этого, тег
<my-form> должен отображать в шаблоне
<form>, который и оборачивает инпуты, которые тоже выводятся через свои директивы. И как я понял еще, инпуты должны как бы зависеть от формы, то есть без нее не отображаться. Проблема в том, что сейчас они никак не взаимоействуют. То есть инпуты живут своей жизнью, а форма - своей(ее шаблон даже не выводится в DOM).
Сейчас директива для отображения формы выглядит так:
// js/myForm.js
'use strict';
(function (w) {
angular.module('app', [])
.directive('myForm', function () {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: '/js/partials/myForm.html'
}
});
})(window);
Для отображения инпута директива выглядит так:
// js/myInput.js
'use strict';
(function (w) {
angular.module('app', [])
.directive('myInput', function () {
return {
require: 'myForm',
restrict: 'E',
transclude: true,
scope: {
name: '@name',
type: '@type',
required: '@required',
label: '@label',
},
templateUrl: '/js/partials/myInput.html'
}
});
})(window);
Пытался сделать инпуты дочерними через require, но от этого нет толку. В DOM по-прежнему инпуты не отображаются внутри тега
<form>.
Может быть кто-то сталкивался с подобным вложением? Как можно организовать код, чтобы все отображалось корректно?
Проект целиком на GItHub:
https://github.com/ermolaevalexey/alfamotors-test-... 
