Adding Form Fields Dynamically in angularjs not working

Question

I am developing an online course application. I am trying to add form fields dynamically in my application, so that I can add more video lecture for a course. However, when I click on "Add Another URL", it doesn't do anything.

If I click on "Add Another URL" then a new form field should come up, with input options of lecture title and add Video lecture here. Which is not happening. Here is my html code. file name :- form-course.client.view.html

<section>
<div class="page-header">
<h1>{{vm.course._id ? 'Edit Course' : 'New Course'}}</h1>
</div>
<div class="pull-right">
<a ng-show="vm.course._id" class="btn btn-primary" ng-click="vm.remove()">
  <i class="glyphicon glyphicon-trash"></i>
  </a>
</div>
<div class="col-md-12">
  <form name="vm.form.courseForm" class="form-horizontal" ng-submit="vm.save(vm.form.courseForm.$valid)" novalidate>
     <fieldset>
        <div class="form-group" show-errors>
           <label class="control-label" for="title">Title</label>
           <input name="title" type="text" ng-model="vm.course.title" id="title" class="form-control" placeholder="Title" required autofocus>
           <div ng-messages="vm.form.courseForm.title.$error" role="alert">
              <p class="help-block error-text" ng-message="required">Course title is required.</p>
           </div>
        </div>
        <div class="form-group">
           <label class="control-label" for="content">Content</label>
           <textarea name="content" data-ng-model="vm.course.content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
        </div>
        <!--  <a class="btn btn-primary pull-right" data-ui-sref="admin.courses.createLecture">  -->
        <div>
           <a class="btn btn-primary pull-right" ng-click="vm.ShowHide()">
           <i class="glyphicon glyphicon-plus"></i>
           </a><br>
           <div ng-show="IsVisible">
              <div class="page-header">
                 <h1>{{vm.course._id ? 'Edit Lecture' : 'New Lecture'}}</h1>
              </div>
              <div class="pull-right">
                 <a ng-show="vm.course._id" class="btn btn-primary" ng-click="vm.remove()">
                 <i class="glyphicon glyphicon-trash"></i>
                 </a>
              </div>
              <div class="col-md-12">
  <form name="vm.form.courseForm" class="form-horizontal" ng-submit="vm.save(vm.form.courseForm.$valid)" novalidate>
  <fieldset data-ng-repeat="field in vm.course.courseLecture track by $index">
  <div class="form-group" show-errors>
  <label class="control-label" for="LectureTitle">Lecture Title</label>
  <input name="courseLecture" type="text" ng-model="vm.course.courseLecture.lecture_title[$index]" id="LectureTitle" class="form-control" placeholder="Lecture Title" required autofocus>
  <div ng-messages="vm.form.courseForm.title.$error" role="alert">
  <p class="help-block error-text" ng-message="required">Lecture name is required.</p>
  </div>
  </div>
  <div class="form-group">
  <label class="control-label" for="courseLecture">Add Lecture video url here</label>
  <input name="courseLecture" type="text" ng-model="vm.course.courseLecture.lecture_video[$index]" id="courseLecture" class="form-control" placeholder="course Lecture">
  </div>
  </fieldset>
  <input type="button" class="btn btn-default" ng-click="vm.addNewChoices()" value="Add another URL">
  </form>
  </div>
  </div>
  </div>
  <div class="form-group">
  <button type="submit" class="btn btn-default">{{vm.course._id ? 'Update' : 'Create'}}</button>
  </div>
  </fieldset>
  </form>
  </div>
</section>

Here is my angular controller file. File name :- course.client.controller.js

(function () {
'use strict';

angular
.module('courses.admin')
.controller('CoursesAdminController', CoursesAdminController);

CoursesAdminController.$inject = ['$scope', '$state', '$window', 'courseResolve', 'Authentication', 'Notification'];

function CoursesAdminController($scope, $state, $window, course, Authentication, Notification) {
var vm = this;

vm.course = course;
vm.authentication = Authentication;
vm.form = {};
vm.remove = remove;
vm.save = save;
vm.ShowHide = ShowHide;
vm.addNewChoice = addNewChoice;

$scope.IsVisible = false;
function ShowHide() {
  // If DIV is visible it will be hidden and vice versa.
  $scope.IsVisible = $scope.IsVisible ? false : true;
}

function addNewChoice() {
  $scope.vm.course.courseLecture.push('');
}

// Remove existing Course
function remove() {
  if ($window.confirm('Are you sure you want to delete?')) {
    vm.course.$remove(function() {
      $state.go('admin.courses.list');
      Notification.success({ message: '<i class="glyphicon glyphicon-ok"></i> Course deleted successfully!' });
    });
  }
}

// Save Course
function save(isValid) {
  if (!isValid) {
    $scope.$broadcast('show-errors-check-validity', 'vm.form.courseForm');
    return false;
  }

  // Create a new course, or update the current instance
  vm.course.createOrUpdate()
    .then(successCallback)
    .catch(errorCallback);

  function successCallback(res) {
    $state.go('admin.courses.list'); // should we send the User to the list or the updated Course's view?
    Notification.success({ message: '<i class="glyphicon glyphicon-ok"></i> Course saved successfully!' });
  }

  function errorCallback(res) {
    Notification.error({ message: res.data.message, title: '<i class="glyphicon glyphicon-remove"></i> Course save error!' });
  }
}
}}());

Please help me with where I am going wrong.

Answer 1

Check your HTML input tag for the button you speak of. You need to remove an s from the ng-click directive. Your AngularJS file declares the function as "vm.AddNewChoice" and not "vm.AddNewChoices", which is what you have in the HTML file.

Here is the code that needs to be fixed. Notice the s is removed in order to align with your AngularJS file:

<input type="button" class="btn btn-default" ng-click="vm.addNewChoice()" value="Add another URL">