1

https://docs.angularjs.org/api/ng/type/form.FormController

在将表单验证添加到引导项目时，我发现自己经常编写这种模式：

<form name="myForm">
    <div class="form-group"
        ng-class="{ 'has-error' : myForm.email.$invalid && (myForm.$submitted || myForm.email.$touched) }">
        <label>Email*</label>
        <input type="email"
            class="form-control"
            name="email"
            ng-model="checkout.info.customer_email"
            required />

        <div class="help-block"
            ng-show="myForm.email.$invalid && (myForm.$submitted || myForm.email.$touched)">
            <div ng-show="myForm.email.$error.required">This field is required.</div>
            <div ng-show="myForm.email.$error.email">This email address is not properly formatted.</div>
        </div>
    </div>
</form>

我试图弄清楚是否有一种简单的方法可以将新属性添加到表单控制器的元素中，例如：

 myForm.email.$showError = myForm.email.$invalid && (myForm.$submitted || myForm.email.$touched

我可以为此创建一个函数，但它并不是必须编写的正确解决方案，showError(myForm, myForm.email)但在查看 FormController 的源代码后可能会容易得多

4

1 回答 1

0

我不能在这里专门重新创建您的代码，但查看角度形式对象的最佳方法是将其附加到父范围对象。

在父控制器中定义：

            $scope.myFormScope = {};
            $scope.myFormScope.showError = function() {
                if(!!$scope.myFormScope.myForm) {
                    return $scope.myFormScope.myForm.email.$invalid &&
                        ($scope.myFormScope.myForm.$submitted || $scope.myFormScope.myForm.email.$touched);
                }
            }

然后这就是标记的样子

         <form name="myFormScope.myForm">
            <div class="form-group"
                ng-class="{ 'has-error' : myFormScope.showError() }">
                <label>Email*</label>
                <input type="email"
                    class="form-control"
                    name="email"
                    ng-model="checkout.info.customer_email"
                    required />

                <div class="help-block" ng-show="myFormScope.showError()">
                    <div ng-show="myFormScope.myForm.email.$error.required">This field is required.</div>
                    <div ng-show="myFormScope.myForm.email.$error.email">This email address is not properly formatted.</div>
                </div>
            </div>
            <input type="submit" />
        </form>
于 2015-12-18T23:20:47.607 回答