angularJS学习之路（十四）---ng-form

最新推荐文章于 2020-04-20 15:05:01 发布

wust小吴

最新推荐文章于 2020-04-20 15:05:01 发布

阅读量667

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/u014737138/article/details/49997439

版权

angularjs 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

		<form name="signup_form" ng-controller="FormController" ng-submit="submitForm()" >
			<div ng-repeat="field in fields" ng-form="signup_form_input">
				<input type="text" name="dynamic_input" ng-required="field.isRequired" ng-model="field.name" placeholder="{{field.placeholder}}" />
				<div ng-show="signup_form_input.dynamic_input.$dirty && signup_form_input.dynamic_input.$invalid">
					<span class="error" ng-show="signup_form_input.dynamic_input.$error.required">The field is required.</span>
				</div>
			</div>
			<button type="submit" ng-disabled="signup_form.$invalid">Submit All</button>
		</form>

		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script>
			var app = angular.module('myApp', []);
			app.controller('FormController', function($scope) {
				$scope.fields = [{
					placeholder: 'Username',
					isRequired: true
				}, {
					placeholder: 'Password',
					isRequired: true
				}, {
					placeholder: 'Email (optional)',
					isRequired: false
				}];
				$scope.submitForm = function() {
					alert("it works!");
				};
			});
		</script>
	</body>

</html>

ng-form 用来在一个表单中嵌套另外一个表单

wust小吴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS学习之路（十四）---ng-form

The field is required. Submit All var app = angular.module('myApp', []); app.controller('FormController', function($scope) { $scope.fields = [{ placeholder: 'Usern
复制链接

扫一扫