Angular "myApp" 应用程序中的 JS 表单验证。

Question

我是 AngularJS 的新手，尝试在 "myApp" 应用程序中实现表单验证。我写了下面的代码。 {{result}} 应该输出 "true"/"false"。但它没有用。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
 <form name = "myForm">
     <p>Input the field: </p>
        <input type = "text" name="myInput" ng-model = "myInput" required>
     </form>
        <p> The result:</p>
        <p>{{result}}</p>
        
    <script>
     var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope){
   $scope.result = myForm.myInput.$valid;
  });
    </script>
</body>

Answer 1

作为 angularJS 的新用户，您的方法在某种程度上是正确的 validation.In 将来您将学习 angular 中的新版本和几种验证方法。下面的代码行是我们如何在 angularJS.

中检查有效输入的方式

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
<body ng-app="">

<p>Try writing in the input field:</p>

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

</body>
</html>

你的方法是correct.Keep起来，如果你能清楚地定义正确的问题就太好了。 :) 干杯。

Answer 2

这一定是解决您问题的正确代码。如果您 "watch" 在 "input field" 中进行更改，则会生成 $valid 结果。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyController"> 
            <form name='myForm' novalidate>
            <p>Input the field: </p>
             <input type='text' ng-model='model.name' name='myInput' required/> 
            </form>
            <p> The result:</p>
            <p>{{myForm.myInput.$valid}}</p>
    <script> 
        var app = angular.module('myApp', []);
            app.controller('MyController',['$scope',function($scope) {
                $scope.$watch('myForm.myInput.$valid',function(newValue,oldvalue) {
                if(newValue) { 
                    //do anything with new value
                }
            });
        }]); 
    </script>
</body>
</html>

希望对您有所帮助。

Angular "myApp" 应用程序中的 JS 表单验证。

Angular JS form validation in "myApp" application.

javascript

angularjs

angularjs-scope

angularjs-validation