Question

我正在做一些我认为相对简单的事情，但Angular并没有正确地为我做准备。我很确定这可以做到，我想我在这里错过了一些东西。

基本上我已经在Angular中创建了一个表单服务，我可以在其中定义一个对象数组，以便即时制作表单。一个例子如下：

email: [
    {
        name: 'email',
        type: text,
        required: true
    }
]

这可能代表某人可以输入他们的电子邮件的表单。我想要做的是对此运行ng-repeat并添加一些Angular脏检查，如下所示：

<form name="form">
    <span ng-repeat="fields in formFields">
        <input name="{{field.name}}
            ng-model="user[field.name]" />


       <div ng-show="form.{{field.name}}.$dirty">Input is dirty</div>
    </span>
</form>

然而，由于某些原因，这不起作用。我尝试了一些不同的组合来完成这项工作，但没有运气。我正在关注我在Angular文档中看到的示例：https://docs.angularjs.org/guide/forms

这是当前代码的小提琴：http://jsfiddle.net/HB7LU/4764/ ...正如您所见，双向绑定在ng-repeat中工作，但不是脏检查。脏检查在之前的示例中正在工作。

我在这里做错了什么？

Answer 1

您可以添加<span ngForm="myForm">来处理此问题。

它可以使用多个输入元素，但请参阅最后的注释。

以下是显示此解决方案的更新小提琴：http://jsfiddle.net/HB7LU/4766/

<div ng-controller="MyCtrl">
    <form name="form">  
        <input name='myInput' ng-model='model.myInput'>
        <div ng-show='form.myInput.$dirty'>Dirty</div>

        <!-- 1. Add `ng-form="myForm"` directive. -->
        <span ng-form="myForm"
              ng-repeat='field in email'>
            <input ng-model="field[email.name]" name={{email.name}} />
            {{field[email.name]}}

            <!-- 2. Reference the named parent -> `myForm.$dirty` -->
            <div ng-show="myForm.$dirty">It's dirty!</div>
        </span>
    </form>
</div>

请注意，您最终会得到myForm中的form.myForm个实例 - 如果您需要访问myForm中的单个form实例，则需要使用自定义处理此问题的指令（请参阅我对您的问题的评论）。

Angular中使用ng-repeat的动态模型和脏检查

1 个答案: