CODEWITHSUNDEEP
angularjs
kittu
kittu

Reputation: 7018

How to add a text box on submit in angular

I am pretty new to angular and from documentation on official site and using plunkr I was able to figure out we use ng-repeat and push method to add something new to DOM if I am not wrong.

I am trying to go through this example found on docs:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example - example-ngController-production</title>


        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
        <!--<script src="app.js"></script>-->
        <script>
            angular.module('controllerAsExample', [])
                .controller('SettingsController1', SettingsController1);

            function SettingsController1() {
                this.name = "John Smith";
                this.contacts = [
                    {type: 'phone', value: '408 555 1212'},
                    {type: 'email', value: '[email protected]'}
                ];
            }

            SettingsController1.prototype.greet = function () {
                alert(this.name);
            };
            SettingsController1.prototype.addContact = function () {
                this.contacts.push({ value: ''});
            };
            SettingsController1.prototype.removeContact = function (contactToRemove) {
                var index = this.contacts.indexOf(contactToRemove);
                this.contacts.splice(index, 1);
            };
            SettingsController1.prototype.clearContact = function (contact) {
                contact.type = 'phone';
                contact.value = '';
            };
        </script>
    </head>
    <body ng-app="controllerAsExample">
        <div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
            <label>Name: <input type="text" ng-model="settings.name"/></label>
            <button ng-click="settings.greet()">greet</button><br/>
            Contact:
            <ul>
                <li ng-repeat="contact in settings.contacts">
                    <select ng-model="contact.type" aria-label="Contact method" id="select_{{$index}}">
                        <option>phone</option>
                        <option>email</option>
                    </select>
                    <input type="text" ng-model="contact.value" aria-labelledby="select_{{$index}}" />
                    <button ng-click="settings.clearContact(contact)">clear</button>
                    <button ng-click="settings.removeContact(contact)" aria-label="Remove">X</button>
                </li>
                <li><button ng-click="settings.addContact()">add</button></li>
            </ul>
        </div>
    </body>
</html>

This is kind basic overview I understood, but I am not able to figure out how ng-repeat is helping us to add a new element(push a new element). As far as I can see its acting like a iterator in java.

Upvotes: 0

Views: 2782

Answers (1)

HJW
HJW

Reputation: 23443

To do it the Angular way, you could have an array of text field meta values, e.g.

formFieldArr = [{fieldName: 'name', minLength: '2' ... } , {fieldName: 'gender', minLength: '4' ... }]

Have an ng-repeat to loop over and render the text fields.

In HTML

<div ng-repeat="formFieldArr">
    <input name="formField.name" ng-minlength="formField.minLength">
</div>

In your submit codes, all you need is to add to the array and the form fields will be rendered.

FormFieldPost.save(){
    onsuccess:
        formFieldArr.push("{fieldName: 'gender', minLength: '4' ... }");
}

If you are thinking in terms of DOM, that will be more of a jQuery solution.

Expanding further, you could also use the same array to render different kinds of form fields.

formFieldArr = [{fieldName: 'name', minLength: '2', fieldType: 'select' ... } , {fieldName: 'gender', minLength: '4', fieldTypre: 'text' ... }]

In HTML

<div ng-repeat="formFieldArr">
    <input name="formField.name" ng-minlength="formField.minLength" ng-show="formField.fieldType === 'text'">
... Do similar ng-show for select.
</div>

(Typing on mobile)

Upvotes: 1

Related Questions