个人中心
gpt4 book ai didi

angularjs - 如何使用 AngularJS 显示 Django 表单错误？

转载 作者：行者123 更新时间：2023-12-02 22:59:14 25 4
gpt4 key购买 nike

我正在使用内置的 Django 用户模型。这是我的序列化器.py:

class UserSerializer(serializers.ModelSerializer):

    class Meta:
        model = User
        fields = ('username', 'password', 'email', )

这是我的观点:

class HomePageView(TemplateView):
    template_name = "home.html"

    def get_context_data(self, **kwargs):
            context = super(HomePageView, self).get_context_data(**kwargs)
            return context

class user_list(APIView): #called when I go to the /CMS/users URL 
    """
    List all users, or create a new user.
    """
    serializer_class = UserSerializer
    def get(self, request):
        users = User.objects.all()
        serializer = UserSerializer(users, many=True)
        return Response(serializer.data)

    def post(self, request):
        serializer = UserSerializer(data=request.DATA)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

这是 home.html:

<html ng-app="notesApp">
<body ng-controller="MainCtrl as ctrl">
        <form ng-submit="ctrl.add()" name="myForm">
            <label>Username</label>
            <input type="text" name="uname" ng-model="ctrl.user.username" required> 

            <label>Password</label>
            <input type="password" name="pwd" ng-model="ctrl.user.password" required>

            <label>Email</label>
            <input type="email" name="mail" ng-model="ctrl.user.email" required> 

        <input type="submit" value="Submit" ng-disabled="myForm.$invalid"> 
        </form>
    </div>

这是 JS:

angular.module("notesApp", [])
    .controller("MainCtrl", ["$http", function($http) {
    var self = this;
    self.users = {}
    var fetchUsers = function() {
        // the line below gets the list of all users
        return $http.get("/CMS/users").then(function(response) {
        self.users = response.data;
        }, function(errResponse) {
        console.error("Error while fetching users.");
        });
    };

    fetchUsers();

    self.add = function() {
        $http.post("/CMS/users", self.user).then(fetchUsers);
        console.log("User clicked submit with ", self.user);
    };
    }]);

我使用了该表单并成功创建了一个用户(我使用了有效的用户名、电子邮件和密码)。我尝试使用已存在的用户名重新创建用户。当我单击表单上的“提交”按钮时，它在日志中返回 400 错误(如预期)，因为如果用户名已存在，Django 不允许创建新用户。现在，django.admin.models.AbstractModel 返回一个错误，表明用户名已存在:

class AbstractUser(AbstractBaseUser, PermissionsMixin):
    """
    An abstract base class implementing a fully featured User model with
    admin-compliant permissions.

    Username, password and email are required. Other fields are optional.
    """
    username = models.CharField(_('username'), max_length=30, unique=True,
        help_text=_('Required. 30 characters or fewer. Letters, digits and '
                    '@/./+/-/_ only.'),
        validators=[
            validators.RegexValidator(r'^[\w.@+-]+$',
                                      _('Enter a valid username. '
                                        'This value may contain only letters, numbers '
                                        'and @/./+/-/_ characters.'), 'invalid'),
        ],
        error_messages={
            'unique': _("A user with that username already exists."),
        })

有没有办法让我在前端用 AngularJS 显示“具有该用户名的用户已存在”？

编辑:我将 self.add() 函数更改为:

self.add = function() {
    $http.post("/CMS/users", self.user)
    .error(function(data, status, headers, config) {
        console.log(data);
     })
    .then(fetchUsers);
};

然后当我尝试使用已存在的用户名创建用户时，会记录以下内容:

Object {username: Array[1]}
   username: Array[1]
     0: "This field must be unique."
     length: 1
     __proto__: Array[0]
  __proto__: Object

最佳答案 

$http.post("/CMS/users", self.user).then(fetchUsers).catch(function(response){
  //here you can manipulate the response from the server and display the message
});

实际上..根据 $http 的文档，你应该处理:

.error(function(data, status, headers, config) {
  // called asynchronously if an error occurs
  // or server returns response with an error status.
 })

以下问题的答案是视情况而定。如果结果总是类似于: {property:[]} 那么你可以这样做:

for(prop in data){
  if(data.hasOwnProperty(prop)){
     var messages = data[prop];
     // now you have the messages array and you can display them.
  }
}

否则，如果结果不同，您将不得不处理每种情况。

编辑:

使用 hasOwnProperty 是确保我们不会从原型(prototype)继承链中获取属性的最佳实践:more details - 基本上确保你没有获取继承的属性(property)

关于angularjs - 如何使用 AngularJS 显示 Django 表单错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30520657/

25 4 0
文章推荐： batch-file - 如何防止出现错误时批处理窗口关闭？
文章推荐： c++ - 第一次阅读崩溃报告
文章推荐： javascript - 哪种 JavaScript 压缩器(粉碎器)与 Google 用于其 JavaScript API 的压缩器执行相同的操作？
文章推荐： variables - 变量 cfform 值 - 嵌套井号
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com