减少 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 方式”是什么？

具体来说：

• 每个<label/> 元素将具有基本相同的ng-class 属性，形式为{'invalid': signIn.<field_name>.$invalid && (signIn.$submitted || signIn.<field_name>.$touched)}。

• 每个<label/> 元素后面都会跟着基本相同的<div class="form-errors"...> 元素。与上面类似，唯一的区别是引用的字段。

当我尝试“在 Angular 中思考”（尤其是着眼于组件）时，似乎最好的方法是让每个 <label></label><div class="form-errors"></div> 对成为一个指令。我只需将用于每个<input/> 元素的各种属性（例如name、type、placeholder、ng-model 和ng-model 验证器（例如required））传递到指令中.

这是解决此问题的推荐“Angular 方式”吗？

Answer 1

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