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

Question

I have a simple form which takes the name of a menu item and the price of that item and puts that data into a database. In my server, I setup a route where when the program is adding in the menu item, if the name is the same as another name on the menu, it spits out as error via res.json() like this:

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!\"}");
  }

Now I want to show an error in my form when the error object is returned to the client from my server. I have setup my form and the error in my form, but I can't quite get the error to toggle properly when a similar item name is given.

This is my form:

<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

So when the server sends the error object, I want to toggle the message addMenuItem.item_name.$error.exists to show up and I wrote this to toggle it, but it's not quite working:

 $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
                }

            });

When I run that code, the Chrome Dev console spits on this error:

ReferenceError: item_name is not defined

From what I can decode, looks like it can't find my form(or more specifically my input of item_name ) for some reason and I can't figure out why. I'd assume that there is a simple way to toggle the error that I have written in the HTML, right?

Answer 1

Reaplce

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

With

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

item_name is not a valid variable and hence the error.