フォームフィールドに検証を適用する

単純なフォームを書いています。フォームの結果を配列に保存し、いずれかまたは両方のフィールドが空のままであれば、名前と姓が更新されます。警告メッセージを表示する必要があります。配列は空の値を格納すべきではありません。クライアント側でこれを処理したかったのです。私は、入力値を保存する前にチェックする方法を混乱させるようなものです。ここでは、コードスニペットです：https://jsbin.com/guduwakeji/edit?html,js,output フォームフィールドに検証を適用する

var app = angular.module('myApp', []); 
 
app.controller('formCtrl', function($scope) { 
 
    $scope.ele = []; 
 
    $scope.updateDetails = function(ele) { 
 
    if (!ele.firstname && !ele.lastname) { 
 
     alert("Ele cannot be empty"); 
 
    } else { 
 
     ele.push({ 
 
     'firstname': '', 
 
     'lastname': '' 
 
     }); 
 
     alert(ele.firstname + " " + ele.lastname); 
 
    } 
 
    console.log(ele); 
 
    }; 
 

 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body ng-app="myApp"> 
 
    <div ng-controller="formCtrl"> 
 
    <div> 
 
     First Name: 
 
     <input type="text" ng-model="ele.firstname"> 
 
     </br> 
 
     Last Name: 
 
     <input type="text" ng-model="ele.lastname"> 
 
     <br/> 
 
     <input type="button" value="Submit" ng-click="updateDetails(ele)"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-06-28 Ritu K

問題のコード自体を追加してください。 –

'ng-pristine'、' ng-dirty'、 'ng-valid'、' ng-invalid'を使用してください –

使用このコード

私は自分のフォーム

var app = angular.module('myApp', []); 
app.controller('formCtrl', function($scope) { 
    $scope.ele={}; 
    $scope.updateDetails = function(ele){ 
    if(ele.firstname && ele.lastname) 
    { console.log(ele);} 
     else{ 
     alert("empty field not allowed"); 
     } 
    }; 

});

出典

2016-06-28 06:50:17 uzaif

はい、これは私にとっても有効です。ありがとうございました。しかし、私はこの疑問を持っている、我々はまた、入力フィールドの右側に必要な属性を使用することができますか？モデル検証と一緒に。 –

そのhtmlフォームが必要でないために動作しませんhtmlフォームでしか動作しません。 – uzaif