Question

我正在尝试验证以下表单：

// JS
$scope.fields = [
  { text: 'Username', type: 'text', value: ''},
  { text: 'Phone', type: 'text', value: ''},
  { text: 'Password', type: 'password', value: ''},
  { text: 'Confirm password', type: 'password', value: ''}
]

$scope.login = function () {
  console.log('Logged in')
}

// HTML
<div class="user">
  <h2 class="header">Log in</h2>
  <form name="login">
    <div ng-repeat="field in fields">
      <input class="form-control" type="{{ field.type }}" placeholder="{{ field.text }}" ng-model="field.value" name="{{ field.text }}" required />
      <div ng-show="(login[field.text].$touched || login.$submitted) && (login[field.text].$error.required)">
        <span class="help-block">Please enter {{field.text}}</span>
      </div>
    </div>
    <a class="btn primary" href="javascript:;" ng-click="login()">Log in</a>
    <a href="#/signup">Sign up</a>
    <a href="#/forgot-password">Forgot password</a>
    <a id="skip" href="#">Skip</a>
  </form>
</div>

当我提交表单时，我会v2.login is not a function。

可能是什么原因？

我没有任何名为v2的变量。

修改

我将代码更改为：

// JS
$scope.submit = function () {
  console.log('Logged in')
}

// HTML
<div class="user">
  <h2 class="header">Log in</h2>
  <form name="login" ng-submit="submit()">
    <div ng-repeat="field in fields">
      <input class="form-control" type="{{ field.type }}" placeholder="{{ field.text }}" ng-model="field.value" name="{{ field.text }}" required />
      <div ng-show="(login[field.text].$touched || login.$submitted) && (login[field.text].$error.required)">
        <span class="help-block">Please enter {{field.text}}</span>
      </div>
    </div>
    <input class="btn primary" type="submit" value="Log in" />
    <a href="#/signup">Sign up</a>
    <a href="#/forgot-password">Forgot password</a>
    <a id="skip" href="#">Skip</a>
  </form>
</div>

现在没有任何反应。单击“提交”时，甚至没有弹出Logged in消息。

Answer 1

您必须在html页面上定义ng-controller。

Answer 2

尝试将表单名称更改为其他名称。 ng-click功能和名称不应相同。

v2.login不是一个函数

2 个答案: