Setting empty text instead of null to ng-model in AngularJS

Question

I need to get about 14 different input values from user to create a product and the input should not receive in the controller as null instead it should go as empty string

To achieve this the following is that I did: Controller:

var NewProductCatalog = {
    CustomerGuid: '00000000-0000-0000-0000-000000000000', SalesPartNo: "", Description: "",
    Name: "", Inventory: 0, UnitPrice: 0, BrandNo: "", TypeNo: "", LobNo: "", BrandName: "",
    TypeName: "", LobName: "", ManufacturePartNo: "", InventoryPartNo: "", EANCode: "",
    ImageURL: "", ProductType: "", DateAdded: "", Active: false, Tax: 0
};
$scope.newProductCatalog = NewProductCatalog;

.cshtml:

 <label for="SalesPartNo">Sales Part No *</label>
 <input type="text" required name="SalesPartNo" ng-model="newProductCatalog.SalesPartNo" class="form-control" />
 ...
 <input type="submit" ng-click="createProductCatalog(newProductCatalog)" />

Create function(controller):

$scope.createProductCatalog = function (NewProductCatalog) {
        var JsonString = angular.toJson(NewProductCatalog);
        CustomProductsServices.ProductCatalog_create(JsonString, function (callback) {
            if (callback.success) {
                $window.alert(callback.message);
            } else {
                $window.alert(callback.message);
            }
        });
    };

This allowed me to send an empty string when there user doesn't input any value.

The issue: When I try to enter a value in a text box and then delete/empty the text box and submit. I am not able to see the SalesPartNo in the resulting JSON string

Please point out the error of if my approach is wrong suggest me a better approach

sylwester · Accepted Answer · 2014-09-10 10:19:29Z

2

Please remove attribute required from <input name="SalesPartNo" /> as angularjs not binding to model unless value is valid.

Please demo here http://jsbin.com/wuhipe/1/edit?html,console,output

<input type="text"  name="SalesPartNo" ng-model="newProductCatalog.SalesPartNo" class="form-control" />

answered Sep 10, 2014 at 10:19

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sylwester Over a year ago

@RandomUser you can wrap your input into form and validate it before you send to server please see here jsbin.com/wuhipe/2/edit?console,output

sylwester Over a year ago

@RandomUser please follow that example as you can see submit button not sending if form in not valid.

sylwester Over a year ago

Let us continue this discussion in chat.

Mo. · Accepted Answer · 2015-12-28 15:23:24Z

0

You can extend JsonString using the default one, say, angular has extend method. Make a copy of NewProductCatalog, say, NewProductCatalogCopy, and then do

angular.extend(NewProductCatalogCopy , JsonString);

edited Dec 28, 2015 at 15:23

Mo.

27.6k36 gold badges167 silver badges235 bronze badges

answered Sep 10, 2014 at 10:40

ABOS

3,8413 gold badges19 silver badges25 bronze badges

Collectives™ on Stack Overflow

Setting empty text instead of null to ng-model in AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related