gpt4 book ai didi

javascript - 如何在表单之外显示 Angular 输入错误状态

转载 作者:行者123 更新时间:2023-12-03 06:54:23 25 4
gpt4 key购买 nike

我有一个要求,所有错误消息都必须显示在应用程序的 header 中。我怎样才能用 Angular 做到这一点?

如果我有此应用程序 ( see on plunker ):

 <body>
<div id="header">
<!-- I want error messages to show up here -->
</div>
<form name="myForm">
<label>Email</label>
<input name="myEmail" type="email" ng-model="user.email" required="" />
<div ng-messages="myForm.myEmail.$error">
<div ng-message="required">required</div>
<div ng-message="email">invalid email</div>
</div>
</form>
<p>Your email address is: {{user.email}}</p>
</body>

我需要的是在 header div 中包含错误消息。我怎样才能做到这一点?

最佳答案

已修复 demo 在这里。

只需以与 in 形式相同的方式访问错误即可,就像设置 <form name="myForm" > 时一样,然后你会得到 $scope.myForm = [yourFormObject],然后在同一 Controller 中的任何地方免费访问。

Angular Form Document

Under the title Binding to form and control state

A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.

并且,甚至可以访问 $error在 Controller 中由 $scope.$watch('formName.fieldName.$error',function(nv,ov){});

// Code goes here

var app = angular.module('plunker', ['ngMessages']);
app.controller('appCtrl', function($scope) {
$scope.$watch('myForm.myEmail.$error', function(nv, ov) {
console.info(nv);
}, true);
});
/* Styles go here */

hr {
margin: 20px 0;
}
<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-messages.js"></script>
<script src="script.js"></script>
</head>

<body ng-controller="appCtrl">
<div id="header">
<div ng-show="myForm.myEmail.$error.required">required</div>
<div ng-show="myForm.myEmail.$error.email">invalid email</div>
</div>
<hr />
<form name="myForm">
<label>Email</label>
<input name="myEmail" type="email" ng-model="user.email" required="" />
<div ng-messages="myForm.myEmail.$error">
<div ng-message="required">required</div>
<div ng-message="email">invalid email</div>
</div>
</form>
<p>Your email address is: {{user.email}}</p>
</body>

</html>

关于javascript - 如何在表单之外显示 Angular 输入错误状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37347008/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com