Question

我目前面临以下问题：

我想使用Angular ngModel指令验证表单输入。

当与$ scope一起使用时，它们可以正常工作现在，使用 controllerAs 语法，它们无法正常工作。

这个问题记录很少，我能找到的唯一帮助是this article。

以下是我的代码的一个小例子：

使用 myController作为vm

调用模板

<form name="vm.signUpForm" ng-submit="vm.signup(vm.user)">

    <label for="name">Name</label>

      <input type="text"
                  class="form-control"
                  id="name"
                  name="name"
                  placeholder="Full name"
                  ng-model="vm.user.name"
                  ng-minlength="2" required />

    <div ng-show="vm.signUpForm.$submitted || vm.signUpForm.name.$touched">
        <span ng-show="vm.signUpForm.name.$error.required">Please fill in your name</span>
        <span ng-show="vm.signUpForm.name.$error.minlength">A minimum of 2 [...]</span>
    </div>

[...]
</form>

我是否被迫使用$scope来验证表单？或者我错过了什么？

提前致谢！

解决方案： Andrew Gray

我必须更改以下行才能使其正常工作：

<form name="vm.signUpForm" ... >
<!-- To -->
<form name="signUpForm" ...>


<div ng-show="vm.signUpForm.$submitted || vm.signUpForm.name.$touched">
<!-- To -->
<div ng-if="signUpForm.name.$invalid">

<span ng-show="vm.signUpForm.name.$error.required" ... >
<!-- To -->
<span ng-show="signUpForm.name.$error.required" ... >

Answer 1

首先要做的事情 - 您不需要表单上的vm.。

<form novalidate name="someForm">
    <label>
        Some Text:
        <span class="danger-text" ng-if="someForm.someText.$invalid">
           ERROR!
        </span>
    </label>
    <input type="text" name="someField" />
</form>

它结束工作的方式是，验证对象与范围无关。 controllerAs语法只是将控制器实例作为范围变量旋转。

尝试从表单和子元素中删除vm.＆＃39;名字，你应该没事。

使用controllerAs语法进行角度表单验证

1 个答案: