减少 ng-model 样板代码（DRY）

Question

使用 ng-model，我们应用中的登录表单最终看起来像这样：

<form name="signIn" ng-submit="ctrl.signIn()" novalidate>
    <label class="item item-input" ng-class="{'invalid': signIn.email.$invalid && (signIn.$submitted || signIn.email.$touched)}">
        <input name="email" type="email" placeholder="Email Address" ng-model="ctrl.email" required>
    </label>
    <div class="form-errors" ng-messages="signIn.email.$error" ng-if="signIn.$submitted || signIn.email.$touched">
        <div ng-messages-include="app/common/form-messages.html"></div>
    </div>

    <label class="item item-input" ng-class="{'invalid': signIn.password.$invalid && (signIn.$submitted || signIn.password.$touched)}">
        <input name="password" type="password" placeholder="Password" ng-model="ctrl.password" required>
    </label>
    <div class="form-errors" ng-messages="signIn.password.$error" ng-if="signIn.$submitted || signIn.password.$touched">
        <div ng-messages-include="app/common/form-messages.html"></div>
    </div>

    <div class="list">
        <button class="button button-block button-positive">
            <b>Sign In</b>
        </button>
    </div>
</form>

这对我来说非常重复。在具有两个以上输入的表单中，此代码将变得非常庞大。

我是一名经验丰富的开发人员，但对 Angular 还是个新手。 减少此样板文件的 "Angular way" 是什么？

具体来说：

每个 <label/> 元素将具有本质上相同的 ng-class 属性 {'invalid': signIn.<field_name>.$invalid && (signIn.$submitted || signIn.<field_name>.$touched)}.
每个 <label/> 元素后跟基本相同的 <div class="form-errors"...> 元素。与上面类似，唯一的区别是引用的字段。

当我尝试 "think in Angular"（尤其是着眼于组件）时，似乎最好的方法是使每个 <label></label><div class="form-errors"></div> 对成为一个指令。我只需要将用于每个 <input/> 元素（例如 name、type、placeholder、ng-model 和 ng-model 验证者（例如 required））。

这是解决这个问题的推荐"Angular way"吗？

Answer 1

我同意你的看法，angular 方法是为此创建一个指令，或者如果你使用 Angular 1.5+ 组件。

减少 ng-model 样板代码（DRY）

Reducing ng-model boilerplate code (DRY)

angularjs

angular-ngmodel

angularjs-ng-model