Question

有这样的表格

    <div ng-controller="FormController as f_ctrl">
    <form ng-submit="f_ctrl.submit()" name="myForm">
    <input type="text" ng-model="f_ctrl.user.username"
            required
            ng-minlength="4"/>
    <input type="text" ng-model="f_ctrl.user.password"/>
    <input type="submit" value="Submit" ng-disabled="myForm.$invalid">
    </form>
</div>

和这样的控制器

    .controller('FormController', [function() {
    var self = this;

    self.submit = function() {
        console.log('User submitted form with ' + self.user.username)
    }
}]);

我遇到了一个问题：当页面首次加载时，即使在我开始输入任何内容之前，它也会立即在用户名字段上显示红色边框。我需要在首次提交后突出显示无效字段。可以使用form.$invalid完成吗？

Answer 1

你必须使用$ pristine。当表单控制器没有改变时，这是真的。因此，当您更改文本框数据时，它会变为错误。

小例子。

<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
    <input id="passAnime" type="password" name="password" ng-model="user.password" class="form-control input-md" placeholder="Password" tabindex="5" ng-maxlength="25" ng-minlength="6" required>

    <span ng-show="userForm.password.$dirty && userForm.password.$invalid">
        <p ng-show="userForm.password.$error.required" class="error-messages">
             Your password is required.
        </p>
        <p ng-show="userForm.password.$error.minlength" class="error-messages">
            Your password is too short. Minimum 6 chars.
        </p>
        <p ng-show="userForm.password.$error.maxlength" class="error-messages">
            Your password is too long. Maximum 25 chars. 
        </p>
    </span>
</div>

Answer 2

您可以通过添加以下CSS来禁用默认情况下添加红色边框的输入字段的默认样式：

input:required {
    -moz-box-shadow: none;
    box-shadow: none;
}

然后，如果要在提交表单时突出显示该字段，则需要确保表单和表单字段具有相关的名称属性。执行此操作将允许您检查字段是否有效，并在文本字段无效时将类应用于文本字段：

<input type="text" name="username" ng-class="{ 'invalid-field' : f_ctrl.myForm.username.$invalid && !f_ctrl.myForm.username.$pristine }" required />

f_ctrl.myForm 和 f_ctrl.myform.username 将包含您可以使用/检查的其他属性，以确定表单是否无效，或者是否它们在任何时候都被修改过（例如f_ctrl.myform.username。$ dirty）。您应该可以通过添加以下HTML来查看页面上的这些属性：

<div>
    <pre>{{f_ctrl.myForm | json}}</pre>
</div>

或者，您可以从控制器向控制台输出 self.myForm 以查看其属性

console.log(self.myForm);

Answer 3

Angular有helpers告诉您表单（或表单字段）是$dirty（用户输入了什么内容）还是表单是$touched（模糊事件已被触发）在输入上）。请参阅this演示。

我需要在首次提交后突出显示无效字段。

不幸的是，Angular不支持这一点。但你可以很容易地自己实现它：

<强>控制器

function FormController() {
  var vm = this;
  vm.submitAttempted = false;
  vm.submit = function(isValid) {
    if (isValid) {
      // do stuff
    }
    else {
      vm.submitAttempted = true;
    }
  };
}

<强> HTML

<div ng-app='app'>
  <div ng-controller='FormController as vm'>
    <form name='fooForm' ng-submit='vm.submit(fooForm.$valid)' novalidate>
      <label>Username</label>
      <input 
        name='username' 
        type='text' 
        ng-model='vm.user.username'
        required
        ng-minlength='4'
        ng-class="{'invalid': vm.submitAttempted && fooForm.username.$invalid}">
      <br /><br />
      <button type='submit'>Submit</button>
    </form>
  </div>
</div>

<强> CSS

.invalid {
  border-color: red;
}

Demo

我遇到了一个问题：当页面首次加载时，即使在我开始输入任何内容之前，它也会立即在用户名字段上显示红色边框。

这可能是因为你有以下CSS类：

.ng-invalid {
  border-color: red;
}

Angular将始终将ng-invalid类应用于无效的字段，并且您无法做任何事情。因此，如果您总是希望无效字段具有红色边框，则不能使用该类，您应该采用与我上面提议的方式类似的方式。

另外，请查看ngMessages。

不要触发表单。$ first首次加载时无效

3 个答案: