Question

我是棱角分明的新手。当提交空表单时，我试图将字段的边框更改为红色。我已经编写了控制器，它在提交有效表单时处理输入，并在提交无效表单时将字段（invalidFormSubmitted）设置为true。

我在css下面尝试但是它无法正常工作

 input.invalidFormSubmitted{
  border-bottom: 0.125rem solid #e42105;
  }

我也试过ng-submitted，但没有运气。

当此变量设置为true时，如何使字段边框变为红色？

提前致谢。

Answer 1

您正在寻找ng-class

angular.module('app',[]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
input.invalidFormSubmitted{
 border:1px solid red;
}
</style> 
<div ng-app="app">
<form name="myForm">
  <input type="text" required ng-model="foo" name="sample" ng-class="{'invalidFormSubmitted':myForm.sample.$invalid}" />
</form>
</div>

正如您所看到的那样，只要输入中没有值，

就会应用该类

Answer 2

试试这个。

var app = angular.module("app",[]);

app.controller("MyCtrl" , function($scope){
  
 
  
  });

.invalidFormSubmitted{
  border-bottom: 0.125rem solid #e42105;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
   <form name="form">
         <input name="name" ng-model="name" ng-required="true" ng-class="{'invalidFormSubmitted': form.name.$invalid && check}"> 
      <button type="button" name="button" ng-click="check = true">ENVIAR</button>
     </form>
 
 
  
</div>

当变量变为真时，angular js添加css

2 个答案: