使用AngularJS提交和验证表单的好模式是什么?

时间:2013-05-19 17:02:05

标签: angularjs

假设我的模型Kitty包含两个必填字段namefavoriteSnack。我想让人们在视图中编辑Kitties,其形式如下:

Edit Kitty
Name: [______________]
Favorite snack: [__________________]
[Submit]

我被困住了 - GET和POST的无聊日子似乎更容易了。那么使用AngularJS设置它的好方法是什么?具体地,

  • 我应该如何设置我的网址和方法? ngResource会自动执行此操作吗?我正在猜测,
    • GET /kitties - 列出所有小猫
    • GET /kitties/:id - 得到一只小猫
    • POST /kitties - 创建一个新的小猫
    • PUT /kitties/:id - 更新小猫
    • DELETE /kitties/:id - 删除小猫
  • 在提交时,我应该验证模型客户端还是服务器端?
  • 如果是服务器端,如何处理我已经将模型挂钩的REST API的非200响应?
  • 我应该如何将错误传播给用户?
  • 我可以按照您的方式进行验证吗?

如果我错过了一些明显的东西,请原谅我。

1 个答案:

答案 0 :(得分:4)

  • 我应该如何设置我的网址和方法? ngResource会自动执行此操作吗?

是的,是的,你应该使用ngResource

  • 在提交时,我应该验证模型客户端还是服务器端?

无论您是否进行客户端验证,都应始终验证发送到服务器上服务器的任何内容。但是,在Angular中,您不需要在提交时进行任何验证,因为验证可能会在您输入时发生(您的上一个问题)

  • 如果是服务器端,如何处理我已经将模型挂钩的REST API的非200响应?

您可以在error方法的ngResource参数中处理它们。请参阅Returns section in the documentation

  • 我应该如何将错误传播给用户?

以Angular的方式进行,只需在发生错误时在模型上设置属性即可。应在UI上的某处呈现此属性。如果您正确编码,您几乎可以保证以正确方式使用您的应用程序的任何人都会看到客户端错误,因此我不会在服务器上对特定于字段的错误投入太多精力。

  • 我可以按照您的方式进行验证吗?

是的,使用所有input attributes