【问题标题】:How to display express-validator errors using angular?如何使用角度显示快速验证器错误?
【发布时间】:2016-10-30 08:45:39
【问题描述】:

我正在尝试弄清楚如何将 express-validator 与 angularjs 和 html 一起使用来显示验证错误,我的问题是我无法访问 errors 变量。请参阅下面的代码。

routes.js

router.post('/register', function(req, res){
 var name = req.body.name;
 var email = req.body.email;
 var username = req.body.username;
 var password = req.body.password;
 var password2 = req.body.password2;

 req.checkBody('name', 'Name is required').notEmpty();
 req.checkBody('email', 'Email is required').notEmpty();
 req.checkBody('email', 'Email not valid').isEmail();
 req.checkBody('username', 'Username is required').notEmpty();
 req.checkBody('password', 'Password is required').notEmpty();
 req.checkBody('password2', 'Passwords does not match').equals(req.body.password);

 var errors = req.validationErrors();

 if(errors){
     res.render('register.html', {
         errors: errors
     });
 } else {
     console.log('no errors');
 }})

我在我的 server.js 中发现了问题所在。 这似乎导致了快速路由和角度路由之间的问题,使快速路由失败,因此无法按需要传递数据。见下文。

app.use(function(req, res){
res.sendFile(__dirname + '/app/index.html');
});
app.use('/', routes);
app.use('/user', users);

如果我尝试这样做,请参见下文。

app.use('/', routes);
app.use('/user', users);
app.use(function(req, res){
res.sendFile(__dirname + '/app/index.html');
});

这使得快速路由可以按我的意愿传递数据,但我的角度路由似乎有问题,一旦我刷新页面 - 视图无法正确加载。

但是,我确实知道如何使用 ejs 或车把来显示它,但这不符合我的需要,应该有一种方法可以用 angular 存储错误并以某种方式用 html 显示它对吗?

感谢任何帮助!

【问题讨论】:

  • 您应该能够使用 res.json({errors:errors}) 进行响应,并在 ng-repeat 的角度侧使用错误数组。您是否面临这方面的问题?
  • @TalhaAwan 非常感谢,但我通过传入 ng-repeat="err in errors" 进行了尝试,它没有获取任何内容:/

标签: javascript html angularjs node.js express


【解决方案1】:

您是否有不想使用 Angular 自己的表单验证器的原因?从用户体验的角度来看,它甚至可能更好,因为用户会立即知道他们的表单是否有效。它还可以让你做一些很酷的事情,比如在表单有效之前禁用提交按钮

<button type="submit" ng-disabled="myFormName.$invalid">Submit</button>

在所需的输入中添加一个简单的 ng-required 可以满足您的大部分需求。设置 input type="email" 将验证电子邮件的格式是否正确。

唯一有点棘手的可能是检查密码是否匹配,但即使这样也可以通过属性指令来实现。

【讨论】:

  • 没有具体原因,我只是想让它按我的意愿工作,而且我也有兴趣了解导致问题的原因。感谢分享解决方案,因为我很可能会继续使用角度验证的未来项目:)
猜你喜欢
  • 2021-02-23
  • 2022-11-23
  • 2019-09-27
  • 1970-01-01
  • 1970-01-01
  • 2020-01-04
  • 1970-01-01
  • 1970-01-01
  • 2022-11-11
相关资源
最近更新 更多