値を入力する前にピンク色の入力フィールドを表示し、値を入力した後に緑色を表示したいとします。しかし、私がスタイルを適用するとき、それは最初の行のためだけに働いています。何かエラーがありますか?角型JSでスタイルが機能していません
<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>
ありがとうございます。
Plunkerそれを行うことができますしてください。 – anu
スタイルを変更する条件は一切ありませんか?変更されないデフォルトでは赤色に設定されています。 – Shahzad
番号。私は条件ng-validとng-invalidを使用しました – Pravin