angular js add css when a variable becomes true - html

Question

I am new to angular js. I am trying to change the border of the fields to red when empty form is submitted.
I have written controller where it processes the input when valid form is submitted and just makes a field(invalidFormSubmitted) to true when invalid form is submitted.
I tried below css but it is not working
input.invalidFormSubmitted{
border-bottom: 0.125rem solid #e42105;
}
I also tried with ng-submitted, but no luck.
How do i make the field border red when this variable is set to true?
Thanks in advance.

Answer 1

you're looking for 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>
As you can see the class is applied as long there is no value in the input here

Answer 2

try this.
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>