Question

我有一个指令，它接收一个元素应该是否来自REST api 。现在，当一个属性设置为required时，我似乎无法使表单无效。

因此，从本质上讲，我能够动态添加“必需的”＆＃39;来自下面的指令的属性，但它不会使表单无效。通过chrome查看我发现，即使存在必需属性，$ error数组中的必需条目也不存在。

app.directive('requireiftrue', function ($compile) { return { require: '?ngModel', link: function (scope, el, attrs, ngModel) { if (!ngModel) { return; } if(attrs.requireiftrue==="true"){ console.log('should require'); el.attr('required', true); $compile(el.contents())(scope); } else{ console.log('should not require'); } } }; });

这里有jsfiddle来说明问题。并且，这是从我的其余API
返回的示例JSON
{ race: false, martialStatus: true, }

编辑：虽然接受的答案让我起步并继续运行，但我仍然需要做很多事情。

即： 1.解决延期承诺，以确保我的表单实际上收到要验证的必填字段 2.观察我的要求＆＃39;属性

我的解决方案

模块配置：

function config($stateProvider) { $stateProvider .state('testState', { url: '/test/form', controller: 'TestCtrl', templateUrl: 'test/form/testForm.tpl.html', resolve: { formDefaultService: function getFormDefaults($q, dataservice) { // Set up a promise to return var deferred = $q.defer(); var myData = dataservice.getFormDefaults(); deferred.resolve(myData); return deferred.promise; //return } }, data: { pageTitle: 'Test Info' } }); }

最后，收到api数据的指令/ HTML：

指令：

.directive('requireiftrue', function ($compile) { return { require: '?ngModel', link: function (scope, el, attrs, ngModel) { if (!ngModel) { return; } attrs.$observe('requireiftrue', function(value){ if(value==="true"){ el.attr('required', true); el.removeAttr('requireiftrue'); $compile(el[0])(scope); } }); } }; });

HTML：

<input max="40" requireiftrue={{defaults.validation.name}} validNumber id="name" name="name" type="text" ng-model="test.name" class="form-control">

Answer 1

你有两个问题：第一个是el.contents（）返回一个空数组。所以你应该做的第一件事就是把它改成el [0]。但如果el.contents（）工作，你会遇到更严重的问题。您本来一直在尝试编译一个指令，该指令将自身作为指令导致无限循环（直到浏览器以任何方式崩溃）。所以这是修改后的代码：

var app = angular.module('form-example', []);

app.directive('requireiftrue', function ($compile) {
    return {
        require: '?ngModel',
        link: function (scope, el, attrs, ngModel) {
            if (!ngModel) {
                return;
            }

            if(attrs.requireiftrue==="true"){
                console.log('should require');
                el.attr('required', true);
                el.removeAttr('requireiftrue');
                $compile(el[0])(scope);
            }
            else{
                console.log('should not require');   
            }
        }
    };
});

但是我应该注意到，现在这个指令是一次性的。如果模型将发生变化，则该指令将不再处理该元素。

Answer 2

使用ng-init初始化requireiftrue，而不是使用指令。并将此值分配给ng-required，如ng-required="requireiftrue"，如下所示。如您所说，您从rest api获取数据，您可以使用从api获得的值初始化requireiftrue，而不是true或false，如下例所示。

希望这会对你有所帮助。

更新了小提琴 http://jsfiddle.net/zsrfe513/3/

<form ng-app="form-example" name='fo' class="row form-horizontal" novalidate>
<div class="control-group" ng-form="testReq">
    <h3>Form invalid: {{testReq.$invalid}}</h3>
 <label class="control-label" for="inputEmail">Email</label>
 <div class="controls" ng-init='requireiftrue = true'>
   <input id="inputEmail" placeholder="Email" ng-model="email"  name='ip' ng-required='requireiftrue'>

    <span ng-show="testReq.ip.$dirty && testReq.ip.$error.required">
        Required.
    </span>
   </div>
 </div>
</form>

Answer 3

尝试：

1.将required指令添加到要应用验证的输入中。

<input id="inputEmail" class="requireiftrue" placeholder="Email" 
    ng-model="email" requireiftrue="true" required>

2将指令定义为类型class，并将指令类添加到HTML输入字段

JS

app.directive('requireiftrue', function ($compile) {
   return {
    restrict: 'C',
    require: '?ngModel',
    .....

HTML

<input id="inputEmail" class="requireiftrue" placeholder="Email" ng-model="email" requireiftrue="true" required>

这是小提琴 - http://jsfiddle.net/4fb6wg30/

的更新

Answer 4

您只需要添加＆＃34; required＆＃34;属性为输入。

<input max="40"
requireiftrue={{defaults.validation.name}}
validNumber
id="name"
name="name"
type="text"
ng-model="test.name"
class="form-control"
required="required">

Answer 5

我使用<input ng-required="true">对我的角度验证组件工作得很好。

如果您使用新的角度组件，请务必传入所需的内容：＆＃34; @＆＃34;而不是必需的：＆＃34; =＆＃34;

scope: {
      required: '@'
    }

我还进一步采用了这种方法，并且需要以相同的方式进行整数和最小/最大验证。

AngularJS动态需要在指令和表单验证中的属性

5 个答案: