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的新手。 ＆＃34; Angular方式＆＃34;减少这个样板？

具体做法是：

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

当我试图在Angular＆＃34;中思考（特别是关注组件），似乎最好的方法是使每个<label></label><div class="form-errors"></div>对成为指令。我只需要为每个<input/>元素（例如name，type，placeholder，ng-model和{ {1}}验证器（例如ng-model））。

这是推荐的＆＃34; Angular方式＆＃34;解决这个问题？

Answer 1

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

减少ng模型样板代码（DRY）

1 个答案: