Generated AngularJS Controller Doesn't Work on Save

[vw98075]

Overview of the issue

With the generated code, one of my entities can not be saved. On the 8080 port, the form remains the same and nothing shows up on the console after I click the submit button. On the 9000 port, however, a log message shows fetching for related entities from the database after I click the button. There isn't an error message on any console, including the browser's console. The followings is the html file.

HTML template

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
            ng-click="vm.clear()">&times;</button>
    <h4 class="modal-title" id="mySkuSLabel">Create or edit a Sku S</h4>
</div>
<div class="modal-body">
    <jhi-alert-error></jhi-alert-error>
    <div class="form-group" ng-show="vm.skuS.id">
        <label for="id">ID</label>
        <input type="text" class="form-control" id="id" name="id"
                ng-model="vm.skuS.id" readonly />
    </div>
    <div class="form-group">
        <label class="control-label" for="field_name">Name</label>
        <input type="text" class="form-control" name="name" id="field_name"
                ng-model="vm.skuS.name"
                ng-maxlength="80"/>
        <div ng-show="editForm.name.$invalid">
            <p class="help-block"
                ng-show="editForm.name.$error.maxlength">
                This field cannot be longer than 80 characters.
            </p>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="field_description">Description</label>
            <textarea class="form-control" name="description" id="field_description"
                ng-model="vm.skuS.description" ></textarea>
    </div>
    <div class="form-group">
        <label class="control-label" for="field_upc">Upc</label>
        <input type="text" class="form-control" name="upc" id="field_upc"
                ng-model="vm.skuS.upc"
                ng-maxlength="80"/>
        <div ng-show="editForm.upc.$invalid">
            <p class="help-block"
                ng-show="editForm.upc.$error.maxlength">
                This field cannot be longer than 80 characters.
            </p>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="field_attributes">Attributes</label>
        <input type="text" class="form-control" name="attributes" id="field_attributes"
                ng-model="vm.skuS.attributes"
                />
    </div>
    <div class="form-group">
        <label class="control-label" for="field_unitPrice">Unit Price</label>
        <input type="number" class="form-control" name="unitPrice" id="field_unitPrice"
                ng-model="vm.skuS.unitPrice"
                required min="0"/>
        <div ng-show="editForm.unitPrice.$invalid">
            <p class="help-block"
                ng-show="editForm.unitPrice.$error.required">
                This field is required.
            </p>
            <p class="help-block"
                ng-show="editForm.unitPrice.$error.min" translate-value-min="0">
                This field should be at least 0.
            </p>
            <p class="help-block"
                ng-show="editForm.unitPrice.$error.number">
                This field should be a number.
            </p>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="field_expressShippingFee">Express Shipping Fee</label>
        <input type="number" class="form-control" name="expressShippingFee" id="field_expressShippingFee"
                ng-model="vm.skuS.expressShippingFee"
                min="0"/>
        <div ng-show="editForm.expressShippingFee.$invalid">
            <p class="help-block"
                ng-show="editForm.expressShippingFee.$error.min" translate-value-min="0">
                This field should be at least 0.
            </p>
            <p class="help-block"
                ng-show="editForm.expressShippingFee.$error.number">
                This field should be a number.
            </p>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="field_activeStartDate">Active Start Date</label>
            <div class="input-group">
                <input id="field_activeStartDate" type="text" class="form-control" name="activeStartDate" datetime-picker="{{dateformat}}" ng-model="vm.skuS.activeStartDate" is-open="vm.datePickerOpenStatus.activeStartDate"
                required/>
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="vm.openCalendar('activeStartDate')"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </div>
        <div ng-show="editForm.activeStartDate.$invalid">
            <p class="help-block"
                ng-show="editForm.activeStartDate.$error.required">
                This field is required.
            </p>
            <p class="help-block"
                ng-show="editForm.activeStartDate.$error.ZonedDateTimelocal">
                This field should be a date and time.
            </p>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="field_activeEndDate">Active End Date</label>
            <div class="input-group">
                <input id="field_activeEndDate" type="text" class="form-control" name="activeEndDate" datetime-picker="{{dateformat}}" ng-model="vm.skuS.activeEndDate" is-open="vm.datePickerOpenStatus.activeEndDate"
                />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="vm.openCalendar('activeEndDate')"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="field_idx1">Idx 1</label>
        <input type="number" class="form-control" name="idx1" id="field_idx1"
                ng-model="vm.skuS.idx1"
                required min="0"/>
        <div ng-show="editForm.idx1.$invalid">
            <p class="help-block"
                ng-show="editForm.idx1.$error.required">
                This field is required.
            </p>
            <p class="help-block"
                ng-show="editForm.idx1.$error.min" translate-value-min="0">
                This field should be at least 0.
            </p>
            <p class="help-block"
                ng-show="editForm.idx1.$error.number">
                This field should be a number.
            </p>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="field_idx2">Idx 2</label>
        <input type="number" class="form-control" name="idx2" id="field_idx2"
                ng-model="vm.skuS.idx2"
                min="0"/>
        <div ng-show="editForm.idx2.$invalid">
            <p class="help-block"
                ng-show="editForm.idx2.$error.min" translate-value-min="0">
                This field should be at least 0.
            </p>
            <p class="help-block"
                ng-show="editForm.idx2.$error.number">
                This field should be a number.
            </p>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="field_inventoryType">Inventory Type</label>
        <input type="text" class="form-control" name="inventoryType" id="field_inventoryType"
                ng-model="vm.skuS.inventoryType"
                required ng-maxlength="8"/>
        <div ng-show="editForm.inventoryType.$invalid">
            <p class="help-block"
                ng-show="editForm.inventoryType.$error.required">
                This field is required.
            </p>
            <p class="help-block"
                ng-show="editForm.inventoryType.$error.maxlength">
                This field cannot be longer than 8 characters.
            </p>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="field_quantityAvailable">Quantity Available</label>
        <input type="number" class="form-control" name="quantityAvailable" id="field_quantityAvailable"
                ng-model="vm.skuS.quantityAvailable"
                min="0"/>
        <div ng-show="editForm.quantityAvailable.$invalid">
            <p class="help-block"
                ng-show="editForm.quantityAvailable.$error.min" translate-value-min="0">
                This field should be at least 0.
            </p>
            <p class="help-block"
                ng-show="editForm.quantityAvailable.$error.number">
                This field should be a number.
            </p>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="field_inEnglish">In English</label>
            <input type="checkbox" name="inEnglish" id="field_inEnglish"
                      ng-model="vm.skuS.inEnglish"/>
    </div>

    <div class="form-group">
        <label for="field_productS">Product S</label>
        <select class="form-control" id="field_productS" name="productS" ng-model="vm.skuS.productS" ng-options="productS as productS.id for productS in vm.products track by productS.id">
            <option value=""></option>
        </select>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.clear()">
        <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span>Cancel</span>
    </button>
    <button type="submit" ng-disabled="editForm.$invalid || vm.isSaving" class="btn btn-primary">
        <span class="glyphicon glyphicon-save"></span>&nbsp;<span>Save</span>
    </button>
</div>
</form>

And the followings is the controller. Note I insert the console.log and nothing is printed on a browser console.

Controller code

(function() {
 'use strict';

angular
    .module('pacificTraderApp')
    .controller('SkuSDialogController', SkuSDialogController);

SkuSDialogController.$inject = ['$timeout', '$scope', '$stateParams', '$uibModalInstance', 'DataUtils', 'entity', 'SkuS', 'ProductS'];

function SkuSDialogController ($timeout, $scope, $stateParams, $uibModalInstance, DataUtils, entity, SkuS, ProductS) {
    var vm = this;

    vm.skuS = entity;
    vm.clear = clear;
    vm.datePickerOpenStatus = {};
    vm.openCalendar = openCalendar;
    vm.byteSize = DataUtils.byteSize;
    vm.openFile = DataUtils.openFile;
    vm.save = save;
    vm.products = ProductS.query();

    $timeout(function (){
        angular.element('.form-group:eq(1)>input').focus();
    });

    function clear () {
        $uibModalInstance.dismiss('cancel');
    }

    function save () {
    console.log("Saving ...");
        vm.isSaving = true;
        if (vm.skuS.id !== null) {
            SkuS.update(vm.skuS, onSaveSuccess, onSaveError);
        } else {
            SkuS.save(vm.skuS, onSaveSuccess, onSaveError);
        }
    }

    function onSaveSuccess (result) {
        $scope.$emit('pacificTraderApp:skuSUpdate', result);
        $uibModalInstance.close(result);
        vm.isSaving = false;
    }

    function onSaveError () {
        vm.isSaving = false;
    }

    vm.datePickerOpenStatus.activeStartDate = false;
    vm.datePickerOpenStatus.activeEndDate = false;

    function openCalendar (date) {
        vm.datePickerOpenStatus[date] = true;
    }
}
})();

Motivation for or Use Case

Reproduce the error

Related issues

Suggest a Fix

In the controller,

      vm.save =  function() {
         vm.isSaving = true;
        if (vm.myEntity.id !== null) {
           MyEntity.update(vm.myEntity, onSaveSuccess, onSaveError);
        } else {
          MyEntity.save(vm.myEntity, onSaveSuccess, onSaveError);
        }
    }

Or in the html file,

    <div ng-controller="SkuSDialogController as vm">

JHipster Version(s)

4.5.6

JHipster configuration

An output of jhipster info is quite long. I only copy the related portion here

SkuS.json

    {
    "fluentMethods": true,
    "relationships": [
        {
            "relationshipName": "productSup",
            "otherEntityName": "productSup",
            "relationshipType": "many-to-one",
            "otherEntityField": "id"
        }
    ],
    "fields": [
        {
            "fieldName": "name",
            "fieldType": "String",
            "fieldValidateRules": [
                "maxlength"
            ],
            "fieldValidateRulesMaxlength": 80
        },
        {
            "fieldName": "description",
            "fieldType": "byte[]",
            "fieldTypeBlobContent": "text"
        },
        {
            "fieldName": "upc",
            "fieldType": "String",
            "fieldValidateRules": [
                "maxlength"
            ],
            "fieldValidateRulesMaxlength": 80
        },
        {
            "fieldName": "attributes",
            "fieldType": "String"
        },
        {
            "fieldName": "unitPrice",
            "fieldType": "BigDecimal",
            "fieldValidateRules": [
                "required",
                "min"
            ],
            "fieldValidateRulesMin": 0
        },
        {
            "fieldName": "expressShippingFee",
            "fieldType": "BigDecimal",
            "fieldValidateRules": [
                "min"
            ],
            "fieldValidateRulesMin": 0
        },
        {
            "fieldName": "activeStartDate",
            "fieldType": "ZonedDateTime",
            "fieldValidateRules": [
                "required"
            ]
        },
        {
            "fieldName": "activeEndDate",
            "fieldType": "ZonedDateTime"
        },
        {
            "fieldName": "idx1",
            "fieldType": "Integer",
            "fieldValidateRules": [
                "required",
                "min"
            ],
            "fieldValidateRulesMin": 0
        },
        {
            "fieldName": "idx2",
            "fieldType": "Integer",
            "fieldValidateRules": [
                "min"
            ],
            "fieldValidateRulesMin": 0
        },
        {
            "fieldName": "inventoryType",
            "fieldType": "String",
            "fieldValidateRules": [
                "required",
                "maxlength"
            ],
            "fieldValidateRulesMaxlength": 8
        },
        {
            "fieldName": "quantityAvailable",
            "fieldType": "Integer",
            "fieldValidateRules": [
                "min"
            ],
            "fieldValidateRulesMin": 0
        },
        {
            "fieldName": "inEnglish",
            "fieldType": "Boolean"
        }
    ],
    "changelogDate": "20170705160532",
    "entityTableName": "sku_s",
    "dto": "no",
    "pagination": "pagination",
    "service": "serviceClass"
    }
    ...
    relationship OneToMany {
       ProductSup{skus} to SkuSup{product},
       ...
    }
    relationship ManyToOne {
        VolumnPricingSup{skus} to SkuSup,
        FulfillmentItem{sku} to SkuSup,
        ...
    }

The .yo-rc.json file

    {
    "generator-jhipster": {
    "promptValues": {
      "packageName": "com.abc.myapp"
    },
    "jhipsterVersion": "4.5.6",
    "baseName": "myapp",
    "packageName": "com.abc.myapp",
    "packageFolder": "com/abc/myapp",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "hibernateCache": "no",
    "clusteredHttpSession": false,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Memory",
    "prodDatabaseType": "postgresql",
    "searchEngine": "elasticsearch",
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "gradle",
    "enableSocialSignIn": false,
    "jwtSecretKey": "xxxxxxx",
    "clientFramework": "angular1",
    "useSass": true,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "otherModules": [
      {
        "name": "generator-jhipster-nav-element",
        "version": "1.2.2"
      },
      {
        "name": "generator-jhipster-docker",
        "version": "2.2.0"
      },
      {
        "name": "generator-jhipster-bootstrap-material-design",
        "version": "3.5.1"
      },
      {
        "name": "generator-jhipster-entity-audit",
        "version": "2.4.1"
      },
      {
        "name": "generator-jhipster-vuejs",
        "version": "0.0.3"
      }
    ],
    "enableTranslation": false
    }
    }

Entity configuration(s) entityName.json files generated in the .jhipster directory

The related SkuS.json is shown above. And the ProductSup is the following:

{
"fluentMethods": true,
"relationships": [
    {
        "relationshipType": "one-to-many",
        "relationshipName": "skus",
        "otherEntityName": "skuSup",
        "otherEntityRelationshipName": "product"
    },
    {
        "relationshipType": "many-to-many",
        "otherEntityRelationshipName": "",
        "relationshipName": "category",
        "otherEntityName": "category",
        "otherEntityField": "id",
        "ownerSide": true
    }
],
"fields": [
    {
        "fieldName": "brand",
        "fieldType": "String",
        "fieldValidateRules": [
            "required",
            "maxlength"
        ],
        "fieldValidateRulesMaxlength": 80
    },
    {
        "fieldName": "name",
        "fieldType": "String",
        "fieldValidateRules": [
            "required",
            "maxlength"
        ],
        "fieldValidateRulesMaxlength": 80
    },
    {
        "fieldName": "model",
        "fieldType": "String",
        "fieldValidateRules": [
            "maxlength"
        ],
        "fieldValidateRulesMaxlength": 80
    },
    {
        "fieldName": "keywords",
        "fieldType": "String"
    },
    {
        "fieldName": "description",
        "fieldType": "byte[]",
        "fieldTypeBlobContent": "text",
        "fieldValidateRules": [
            "required"
        ]
    },
        {
        "fieldName": "specification",
        "fieldType": "String",
        "fieldValidateRules": [
            "maxlength"
        ],
        "fieldValidateRulesMaxlength": 255
    },
    {
        "fieldName": "hasVariants",
        "fieldType": "Boolean",
        "fieldValidateRules": [
            "required"
        ]
    },
    {
        "fieldName": "variantAvailibityMatrix",
        "fieldType": "String"
    },
    {
        "fieldName": "status",
        "fieldType": "String",
        "fieldValidateRules": [
            "required",
            "maxlength"
        ],
        "fieldValidateRulesMaxlength": 8
    },
    {
        "fieldName": "tMallProductURL",
        "fieldType": "String",
        "fieldValidateRules": [
            "maxlength"
        ],
        "fieldValidateRulesMaxlength": 255
    },
    {
        "fieldName": "jdProductURL",
        "fieldType": "String",
        "fieldValidateRules": [
            "maxlength"
        ],
        "fieldValidateRulesMaxlength": 255
    },
    {
        "fieldName": "inEnglish",
        "fieldType": "Boolean",
        "fieldValidateRules": [
            "required"
        ]
    },
    {
        "fieldName": "limitationPerCustomer",
        "fieldType": "Integer",
        "fieldValidateRules": [
            "min"
        ],
        "fieldValidateRulesMin": 1
    }
],
"changelogDate": "20170708185112",
"entityTableName": "product_sup",
"dto": "no",
"pagination": "pagination",
"service": "serviceClass"
}

Browsers and Operating System

Linux Mint 18.2

• Checking this box is mandatory (this is just to show you read everything)

[jdubois]

Can you write a good title?

[jdubois]

Thanks !

[gmarziou]

An output of jhipster info is quite long. I only copy the related portion here

Well you copied only one entity SkuS and forgot its related entity ProductS.
For long text fragments, you can always use HTML 5 details tag.

<details>
 <summary>Summary Goes Here</summary>
 ...this is hidden, collapsable content...
</details>

[jdubois]

@gmarziou we should use this in our issue template, have you tried it?

[jdubois]

@vw98075 if you use your browser in "dev mode", can you see the network rework? Does clicking on the button produce a request? If yes, you should be able to see it on the backend, with our logging aspect. This is to understand if the issue is on the backend or on the frontend.

[gmarziou]

@jdubois Yes I used it many times, it has some restrictions though, you cannot have complex markdown in included text but for code or command output it'll be fine using <pre> tag, maybe not for jhipster info as it returns some ## headers I think.

[gmarziou]

@vw98075 I wonder why this happens only to one entity, maybe this is related to your way of naming entities using plural?

[gmarziou]

I edited the issue using details tag.

[deepu105]

@gmarziou we can incorporate the details tag into the output of jhipster info so that code is wrapped in it. What say?

[jdubois]

Sorry but you also posted this on StackOverflow at https://stackoverflow.com/questions/44960062/nothing-happens-after-clicking-the-submit-button

• This is against our guidelines
• This makes us all lose time, as you can see I'm now spending time on both :-(
• This is really isn't nice for people looking for solutions, as they have both this ticket and the SO answer

-> I'm closing this as "invalid" as you have answers on SO, and as there should only be one "ticket" or "question"

[gmarziou]

@deepu105 yes good idea. I can PR it if you want

[gmarziou]

Just tried in a stackoverflow answer, it does not collapse but it does not look bad either, so jhipster:info can use it safely or we could add a --raw option or a question.

[deepu105]

I think its ok if it doesnt collapse in SO, the primary purpose is for us to work on issues efficiently

[gmarziou]

OK, I will do it.
BTW, maybe we should generate a file rather than printing on console, this would allow us to use a yeoman template

[gmarziou]

It works with firefox and mobile chrome

[vw98075]

@jdubois Sorry for this late reply. It was a bed time here when your folks had a conversation on this problem. To answer your question, I retest it and don't see any traffic on the network panel of the browser. And I was not aware of such guideline which a question only can be posted either here or Stockoverflow. Sorry for that. I first noticed this problem two days ago. I thought the problem must be something I didn't do it right. I try not to bother your folks as possible. I believe that it is a front end problem. The Spring Rest controller method is not hit.

@gmarziou I will rename the entity and replace the "S" at the end with something else. And report back to you later.

A update: After I rename the related entity names from SkuS to SkuSup, the problem still persists. I believe that problem is likely caused by associated relationships. I add all related relationship definitions from an output of "jhipster info".