Question

我有一个带有一些字段的表格我用css类验证字段:(如果字段无效且用户触摸它，则输入＆border-color = red。）

select.ng-invalid.ng-touched,
input.ng-invalid.ng-touched,textarea.ng-invalid.ng-touched {
    border-color: red;
}

如果用户在未填写一个或多个字段的情况下提交表单，则会出现危险警告。

HTML：

  <div ng-show="formInvalid>
       error!
  </div>

JS：

 if ($scope.pniyaForm.$valid) {
    $scope.formInvalid = false;
      .....
 } else {
    $scope.formInvalid = true;
 }

但是，如果用户提交表单并且没有触及任何字段，则css类不会影响。（因为用户没有触摸......）
我想在代码中添加该类有没有人想要一个优雅的方法来做到这一点，而不是分别在每个领域写它？

Answer 1

在angularjs中使用ng-class验证

<div class="form-group">
    <label>Name</label>
    <input type="text" required ng-model="name" name="name" ng-class="{'has-error': myForm.name.$invalid}" />
</div>

<div class="form-group">
    <label>Age</label>
    <input type="text" required ng-model="age" name="age" ng-class="{'has-error': myForm.age.$invalid}" />
</div>

Answer 2

可能的解决方案：

执行表单功能时，请在其中添加以下行。

package security

import "gitlab.sio.com/go/zlog"

Middleware struct {
    log             zlog.Logger
}

func New(log zlog.Logger){
...
mdw := Middleware{}
mdw.log = log
}

此行将导致ng $ scope。$ watch（）运行并应用更改（如果存在）。可能有效，可能无效，请阅读以下链接以深入了解该问题。

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Answer 3

如果用户提交表单但未触及任何字段，则css类不会影响

您需要为ngModel提供初始定义的值，并至少为输入提供required属性。

使用ngClass有条件地应用css类，以防某些表单部分无效

<form name="myform">
    <div class="form-group" ng-class="{'has-error': myform.myinput.$invalid}">
        <input name="myinput" ng-model="myName" class="...." required> 
    </div>
....
</form>

....
// in controller
$scope.myName = "cats"; // form is valid
$scope.myName = "";     // form is invalid, and the css class 'has-error' will be applied

然后在提交按钮中使用ngDisables以防止在表单无效时提交

<button type="submit" ng-disabled="myform.$invalid">submit</button>

获得形式角的领域

3 个答案: