私はテーブルの行のために持っtableてng-repeatいます。私は、インライン編集し、単一の行からのデータの検証をしたいが、使用することは不可能であるformか、ng-form内部テーブル。インライン編集には、ng-show内部の入力を使用しますtd。だから、私は2つの質問があります：
インライン編集の正しいアプローチですか？（td内の非表示の入力を使用）。
行のデータを検証するにはどうすればよいですか？
更新：「フォーム送信」のようなテーブル行が必要で、間違ったデータを持つテーブルセルのエラークラスを追加します。
私はAngularに不慣れです。
2番目の質問に対する簡単な検証を使用して例を作成します。
見る：
<div ng-controller="MyCtrl">
<table class="table table-condensed">
<thead>
<tr>
<th>Id</th>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{item.id}}</td>
<td><input ng-model="item.firstName" ng-class="{ error: !item.firstName }"/></td>
<td><input ng-model="item.lastName" ng-class="{ error: !item.lastName }"/></td>
<td><input ng-model="item.email" ng-pattern="emailRegExp" ng-class="{ error: !item.email }"/></td>
<td><button ng-disabled="!item.lastName || !item.firstName || !item.email"/>Submit</td>
</tr>
</tbody>
</table>
</div>
コントローラ：
function MyCtrl($scope) {
$scope.items = [
{
id: 1,
firstName: 'Ivan',
lastName: 'Ivanov',
email: '[email protected]'
},
{
id: 2,
firstName: 'Petr',
lastName: 'Petrov',
email: '[email protected]'
}
];
$scope.emailRegExp = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
}
jsfiddleを参照してください:)
日付の検証に関するコメントの質問：
私はそれを行うための2つの方法を見ます：
1） yorコントローラーで作成$scope.dateRegExp = "/^\d{2}([./-])\d{2}\1\d{4}$/"し、それを使用するビューにng-pattern="dateRegExp"
2）ng-change=""ディレクティブを使用できます：
見る：
<tr ng-repeat="item in items">
<td><input ng-model="item.date" ng-change="validateDate(itemDate)" ng-class="{ error: dateInputError }"/></td>
コントローラ：
$scope.dateInputError = false;
$scope.validateDate = function(date) {
if(//some validation){
$scope.dateInputError = true; //true - it means error style shows
}
};
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加