How can I make input fields turn pink before values are entered and green after values are entered? Currently, the styling only applies to the first row. What could be causing this issue?
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
input.ng-invalid {
background-color:pink;
}
input.ng-valid {
background-color:lightgreen;
}
</style>
</head>
<body>
<div ng-app="myapp" ng-controller="mycont">
<form name="myform">
<table>
<tr>
<td>Faculty ID</td>
<td><input type="text" name="facultyid" ng-model="faculty.id" required /><br><span style="color:red" ng-show="myform.facultyid.$touched && myform.facultyid.$invalid">Id is required</span></td>
</tr>
<tr>
<td>Faculty Name:</td>
<td><input type="text" ng-model="faculty.name" /></td>
</tr>
<tr>
<td>Faculty Salary:</td>
<td><input type="text" ng-model="faculty.salary" /></td>
</tr>
<tr><td><input type="checkbox" ng-model="agree" required>Agree terms and conditions</td></tr>
<tr>
<td colspan="2"><button ng-disabled="myform.$invalid" ng-click="addfaculty(faculty)">ADD</button></td>
</tr>
</table>
</form>
Any help on this matter would be greatly appreciated.