Angular 使用 controllerAs 语法进行表单验证

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.，应该没问题。

Angular 使用 controllerAs 语法进行表单验证

Angular form validation using the controllerAs syntax

angularjs

angularjs-controller

angularjs-forms

angularjs-controlleras