У меня есть простое приложение, основанное на проекте angular-fullstack, с множеством очень похожих полей ввода.
Цель: сделать поля ввода динамическими, переместить их в директиву, чтобы код поля ввода был перемещен из шаблона - лучше поддерживать, меньше повторений кода.
Проблема: Я не могу получить доступ к таким значениям, как $valid, в динамически сгенерированном поле, поскольку они не установлены
У меня очень простая директива:
'use strict';
const angular = require('angular');
export default angular.module('testApp.inputText', [])
.directive('inputText', function() {
return {
template: require('./inputText.html'),
restrict: 'EA',
scope: false,
transclude: true,
link: function(scope, element, attrs) {
scope.fieldName = attrs.name;
}
};
})
.name;
С простым шаблоном:
<input
type="text"
name="fieldName"
class="uk-input"
ng-model="build.justTest.view[fieldName].value"
>
Который я называю так:
<form name="build.justTest.view" novalidate>
<input-text name="new-test-input"></input-text>
</form>
Когда я использую ng-inspector для проверки динамического поля, оно выглядит так:
{value: "1234"}
По сравнению со статическим полем ввода, определенным в шаблоне:
{$viewValue: "", $modelValue: "", $$rawModelValue: "", $validators: {…}, $asyncValidators: {…}, …}$$animate: {on: ƒ, off: ƒ, pin: ƒ, enabled: ƒ, cancel: ƒ, …}$$attr: Attributes {$attr: {…}, $$element: JQLite(1), type: "text", name: "giftDescription", class: "uk-input uk-height-small", …}$$classCache: {ng-valid: true, ng-invalid: false, ng-valid-minlength: true, ng-valid-maxlength: true}$$currentValidationRunId: 8$$element: JQLite [input.uk-input.uk-height-small.ng-pristine.ng-untouched.ng-valid.ng-empty.ng-valid-minlength.ng-vali…]$$exceptionHandler: ƒ (exception, cause)$$lastCommittedViewValue: ""$$ngModelGet: ƒ (s,l,a,i)$$ngModelSet: ƒ (s,v,l)$$parentForm: {$$controls: Array(16), $error: {…}, $$success: {…}, $pending: undefined, $name: "build.justTest.view", …}$$parse: ƒ $parse(exp, interceptorFn)$$parsedNgModel: ƒ (s,l,a,i)$$parsedNgModelAssign: ƒ (s,v,l)$$parserValid: undefined$$pendingDebounce: null$$q: ƒ $Q(resolver)$$rawModelValue: ""$$success: {minlength: true, maxlength: true}$$timeout: ƒ timeout(fn, delay, invokeApply)$asyncValidators: {}$dirty: false$error: {}$formatters: [ƒ]$invalid: false$modelValue: ""$name: "giftDescription"$options: ModelOptions {$$options: {…}}$parsers: []$pending: undefined$pristine: true$render: ƒ ()$touched: false$untouched: true$valid: true$validators: {minlength: ƒ, maxlength: ƒ}$viewChangeListeners: [ƒ]$viewValue: ""value: "12345678910"$$scope: Scope {$$childTail: ChildScope, $$childHead: ChildScope, $$nextSibling: null, $$watchers: Array(86), $$listeners: {…}, …}__proto__: Object
Может кто-нибудь сказать мне, почему $valid не определено на входе из директивы и
Заранее спасибо!