Question

验证在我的formRow指令中无效。我在指令中放置了带有字段名称的ng-form，但是[[field]]。$ invalid例如不会被触发。有人知道为什么吗？

指令：

<li class="form__row" ng-form="[[ field ]]">
<div class="label">
    <label ng-class="{ 'required' : required == 'true' }" for="frm-[[ field ]]">[[ label ]]</label>
</div>
<div class="field" ng-switch="required" ng-class="{ 'field--invalid' : [[ field ]].$touched && [[ field ]].$invalid, 'field--valid': [[ field ]].$touched && [[ field ]].$valid }">
    <input ng-switch-when="true" type="[[ type ]]" name="[[ field ]]" id="frm-[[ field ]]" ng-model="record[ field ]" required>
    <input ng-switch-default type="[[ type ]]" name="[[ field ]]" id="frm-[[ field ]]" ng-model="record[ field ]" >
</div>

Directive.js

.directive('formRow', function () {
return {
    restrict: 'EA',
    templateUrl: FW.Config.submap + 'angular/_directives/formRow.html',
    replace: true,
    scope: {
        record: '=',
        type: '@',
        field: '@',
        label: '@',
        required: '@'
    },
    link: function($scope, element, attr) {
        // Wordt gezet bij form submit
        $scope.$on('record:invalid', function() {
            $scope[$scope.field].$setTouched;
        });
    }
}
})

从模板致电：

<form name="formData" ng-submit="submit($event)" class="form--wide frm-login" novalidate>
    <ul>
        <form-row record="inloggen" field="emailadres" label="E-mailadres" type="email" required="true"></form-row>
        <form-row record="inloggen" field="wachtwoord" label="Wachtwoord" type="password" required="true"></form-row>
    </ul>

顺便说一下：我使用方括号作为$ interpolateProvider符号，因为我的模板中也使用了twig。

Answer 1

我不确定创建这样的指令是个好主意，但是主要的问题以及使它非常尴尬的是你使用与对应元素同名的嵌套表单指令ngForm。它增加了范围级别。

你可以使ngClass正常使用这个表达式（我警告这看起来很奇怪:)：

ng-class="{ 'field--invalid' : this[field][field].$touched && this[field][field].$invalid, 'field--valid': this[field][field].$touched && this[field][field].$valid }"

首先请注意，您不在表达式中使用插值标记，因此[[ ]]内部不需要ngClass。然后，为了通过变量名解析动态对象属性，您将使用括号表示法，因此

this[field][field]

你有：

this指向当前范围对象
this[field]指向ngForm对象，该对象与field中为输入元素和父ngForm
this[field][field]指向由this[field]访问的表单中的单个输入元素。

演示： http://plnkr.co/edit/zarnKqPnYw4BNQQKVy9t?p=info

表单字段指令中的角度验证不起作用

1 个答案: