none
Bind HTML form to sharepoint list items using angular JS RRS feed

  • Question

  • i need to create items for the below details in sharepoint list using angular JS

    <html>
    <body ng-app="app">
    <form name="exampleForm">
    <input type="text" name="snumber" ng-model="snumber" ng-pattern="/^2-[0-9]{2}-[0-9]{3}-[0-9]{4}$/" ng-blur="formats(snumber)" maxlength="15"/>  
    <input type="text" name="Name" ng-model="name" maxlength="15"/>
    <input type="text" name="Amount" ng-model="Amount" maxlength="15"/>   

    </div>   
    </form>
    </body>
    </html>



    Blitz


    • Edited by sree_23 Wednesday, December 4, 2019 11:15 AM
    Wednesday, December 4, 2019 10:39 AM

Answers

  • Hi

    Sample demo for your reference(updated based on http://sids-blogsite.blogspot.com/2016/02/crud-operations-on-sharepoint-list.html).

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>
        <script type="text/javascript">
            var spApp = angular
                .module("spApp", [])
                .controller("viewItemsController", function ($scope, $http) {
                    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contacts')/items?$select=Title,sNumber,Name,Amount,ID";
                    $http(
                        {
                            method: "GET",
                            url: url,
                            headers: { "accept": "application/json;odata=verbose" }
                        }
                    ).then(function (data, status, headers, config) {
                        $scope.contacts = data.data.d.results;
                    }).catch(function (data, status, headers, config) {
                        console.log(data)
                    });
    
                })
    
                .controller("addItemsController", function ($scope, $http) {
                    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contacts')/items";
                    var vm = $scope;
                    //$scope.funcSave = function () {
                        
                    //}
                    vm.addContact = function () {
                        if ($scope.SaveForm.$valid) {
                            return $http({
                                headers: { "Accept": "application/json; odata=verbose", "Content-Type": "application/json; odata=verbose", "X-RequestDigest": jQuery("#__REQUESTDIGEST").val() },
                                method: "POST",
                                url: url,
                                data: {
                                    //update SP.Data.ContactsListItem to SP.Data.YourlistnameListItem
                                    '__metadata': {
                                        'type': 'SP.Data.ContactsListItem'
                                    },
                                    'Title': 'default',
                                    'sNumber': vm.sNumber,
                                    'Name': vm.Name,
                                    'Amount': vm.Amount
                                }
                            })
                                .then(saveContact)
                                .catch(function (message) {
                                    console.log("addContact() error: " + message);
                                });
                            function saveContact(data, status, headers, config) {
                                alert("Item Added Successfully");
                                return data.data.d;
                            }
                        }
                        else {
                            alert("Form is not Valid..!!");
                        }
                    }
                })
    
                .controller("editItemsController", function ($scope, $http) {
                    var vm = $scope;
                    vm.editContact = function () {
                        var data = {
                            '__metadata': {
                                'type': 'SP.Data.ContactsListItem'
                            },
                            'sNumber': vm.sNumber,
                            'Name': vm.Name,
                            'Amount': vm.Amount
                        };
                        return $http({
                            headers: {
                                "Accept": "application/json; odata=verbose",
                                "Content-Type": "application/json; odata=verbose",
                                "X-HTTP-Method": "MERGE",
                                "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                                "Content-Length": data.length,
                                'IF-MATCH': "*"
                            },
                            method: "POST",
                            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contacts')/items(" + vm.itemId + ")",
                            data: data
                        })
                            .then(saveContact)
                            .catch(function (message) {
                                console.log("editContact() error: " + message);
                            });
                        function saveContact(data, status, headers, config) {
                            alert("Item Edited Successfully");
                            return data.data.d;
                        }
                    }
                })
    
                .controller("delItemsController", function ($scope, $http) {
                    var vm = $scope;
                    vm.delContact = function () {
                        return $http({
                            headers: {
                                "X-HTTP-Method": "DELETE",
                                "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                                'IF-MATCH': "*"
                            },
                            method: "POST",
                            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contacts')/items(" + vm.itemId + ")"
                        })
                            .then(saveContact)
                            .catch(function (message) {
                                console.log("delContact() error: " + message);
                            });
                        function saveContact(data, status, headers, config) {
                            alert("Item Deleted Successfully");
                            return data.data.d;
                        }
                    }
                });
        </script>
        <h3>View Contacts</h3>
        <hr />
        <div ng-app="spApp">
            <div ng-controller="viewItemsController">
                <div ng-repeat="contact in contacts">
                    {{contact.ID}}: {{contact.Title}}, {{contact.sNumber}}, {{contact.Name}}, {{contact.Amount}}
                    <br />
                </div>
            </div>
            <hr />
            <h3>Add Contacts</h3>
            <div ng-controller="addItemsController">
                <ng-form name="SaveForm">
                    <div class="Table">
                        <div class="Row">
                            <div class="Cell">
                                sNumber :
                            </div>
                            <div class="Cell">
                                <input type="text" name="sNumber" ng-model="sNumber" ng-pattern="/^2-[0-9]{2}-[0-9]{3}-[0-9]{4}$/" maxlength="15" />
                                <br />
                                <span style="color:red" ng-show="SaveForm.sNumber.$invalid" class="ng-hide">
                                    Please Enter Valid  sNumber.!
                                </span>
                            </div>
                        </div>
                        <div class="Row">
                            <div class="Cell">
                                Name :
                            </div>
                            <div class="Cell">
                                <input type="text" name="Name" ng-model="Name" maxlength="15" />
                            </div>
                        </div>
                        <div class="Row">
                            <div class="Cell">
                                Amount :
                            </div>
                            <div class="Cell">
                                <input type="text" name="Amount" ng-model="Amount" maxlength="15" />
                            </div>
                        </div>
                        <div class="Row">
                            <div class="Cell">
    
                            </div>
                            <div class="Cell">
                                <!--<input type="submit" value="submit" />-->
                                <input type="button" id="btnAddContact" value="Add Contact" ng-click="addContact()" />
                            </div>
                        </div>
                    </div>
                </ng-form>
            </div>
            <hr />
    
    
            <h3>Edit Contacts</h3>
            <div ng-controller="editItemsController">
                <div class="Table">
                    <div class="Row">
                        <div class="Cell">
                            ID :
                        </div>
                        <div class="Cell">
                            <input type="text" id="itemId" ng-model="itemId" />
                        </div>
                    </div>
                    <div class="Row">
                        <div class="Cell">
                            sNumber :
                        </div>
                        <div class="Cell">
                            <input type="text" id="firstName" ng-model="sNumber" />
                        </div>
                    </div>
                    <div class="Row">
                        <div class="Cell">
                            Name :
                        </div>
                        <div class="Cell">
                            <input type="text" id="firstName" ng-model="Name" />
                        </div>
                    </div>
                    <div class="Row">
                        <div class="Cell">
                            Amount :
                        </div>
                        <div class="Cell">
                            <input type="text" id="lastName" ng-model="Amount" />
                        </div>
                    </div>
                    <div class="Row">
                        <div class="Cell">
                        </div>
                        <div class="Cell">
                            <input type="button" id="btnEditContact" value="Edit Contact" ng-click="editContact()" />
                        </div>
                    </div>
                </div>
            </div>
            <hr />
    
    
            <h3>Delete Contacts</h3>
            <div ng-controller="delItemsController">
                <div class="Table">
                    <div class="Row">
                        <div class="Cell">
                            ID :
                        </div>
                        <div class="Cell">
                            <input type="text" id="itemId" ng-model="itemId" />
                        </div>
                    </div>
                    <div class="Row">
                        <div class="Cell">
    
                        </div>
                        <div class="Cell">
                            <input type="button" id="btnDelContact" value="Delete Contact" ng-click="delContact()" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by sree_23 Thursday, December 5, 2019 2:31 PM
    Thursday, December 5, 2019 3:14 AM