Question

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

＆＃13;

<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>

＆＃13;

Answer 1

这必须是您问题的正确代码。如果您“观察”“输入字段”中的更改，则会生成$ 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>

希望这会对你有所帮助。

Answer 2

作为angularJS的新用户，您的approcach在表单验证方面是正确的。将来您将学习角度和几种验证方法的新内容。下面的代码行是我们如何在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>

你的方法是正确的。保持它，如果你能清楚地定义正确的问题会很好。 :) 欢呼声。

Angular JS表单验证＆＃34; myApp＆＃34;应用。

2 个答案: