Question

我有一个简单的表单，它取一个菜单项的名称和该项的价格，并将该数据放入数据库。在我的服务器中，我设置了一个路径，当程序在菜单项中添加时，如果名称与菜单上的另一个名称相同，它会通过res.json()发出错误，如下所示：

if (newItem) {
    //Add the item to the db
  }
  else {
    // the item has the same name as another item on the menu
    res.json("{\"Error\" : \"Menu Item already exists!\"}");
  }

现在，当我从服务器将错误对象返回给客户端时，我希望在表单中显示错误。我已经在我的表单中设置了我的表单和错误，但是当给出类似的项目名称时，我无法正确地切换错误。

这是我的表格：

<form role="form" name="addMenuItem">
            <div layout="row">
                <md-input-container class="md-block" flex-gt-xs="">
                    <label>Item Name</label>
                    <input name="item_name" ng-model="formData.item_name" ng-minlength="1" ng-required="true" size="30">
                    <div ng-messages="addMenuItem.item_name.$error">
                        <div ng-message="required">Item name is required</div>
                    </div>
                    <div ng-messages="addMenuItem.item_name.$error.exists">
                        <div ng-message="required">Item name exists</div>
                    </div>
                </md-input-container>
//other form components

因此，当服务器发送错误对象时，我想切换消息addMenuItem.item_name.$error.exists以显示，我写了这个以切换它，但它不是很有效：

 $http.post('/addMenuItem', $scope.formData)
            .then(function (data) {
                const resJson = JSON.parse(data.data);
                "Error" in resJson ? console.log("Error") : console.log("No err");
                console.log(resJson.hasOwnProperty('Error'));
                if(resJson.hasOwnProperty('Error')) {
                    $scope.addMenuItem[item_name].$setValidity('exists'); // error thrown on this line
                }
                else {
                      //add to db
                }

            });

当我运行该代码时，Chrome Dev控制台会发出此错误：

ReferenceError: item_name is not defined

从我可以解码的内容来看，由于某种原因看起来无法找到我的表单（或者更具体地说是item_name的输入），我无法弄清楚原因。我假设有一种简单的方法可以切换我在HTML中编写的错误，对吗？

Answer 1

Reaplce

$scope.addMenuItem[item_name].$setValidity('exists');

使用

$scope.addMenuItem["item_name"].$setValidity('exists');

item_name不是有效变量，因此是错误。

在Angular Material中使用客户端表单进行服务器端验证

1 个答案: