AngularJS: Creating a New Form in Angular

Question

I am creating a new form in Angular so in the NewRequestController, I am setting up a $scope object with the defaults for the form and blanks for the form fields.

Here is the new controller:

var NewRequestController = function($scope){
    $scope.web = [];

    $scope.web['Title'] = "";
    $scope.web['Site'] = "";
    $scope.web['Priority'] = "";
    $scope.web['Division'] = $scope.current_user.Division;
    $scope.web['Requestor'] = $scope.loggedInUser.Title;
    $scope.web['CreationDate'] = new Date();
    $scope.web['CustomerDueDate'] = "";
    $scope.web['Page'] = "";
    $scope.web['Instructions'] = "";

And here is my form:

<form name="newWebForm" role="form">
    <div class="row">
        <div class="form-group col-lg-12">
        <label for="description">
            Description: <span class="required">*</span>
        </label>
        <input type="text" class="form-control" name="title" placeholder="Description" ng-model="web.Title">
        </div>
    </div> <!-- Description -->

    <div class="row">
        <div class="form-group col-lg-6">
            <label for="site">Site Affected:</label>
            <select name="site" class="form-control" ng-options="w.ID as w.Title for w in websites" ng-model="web.Site">
            <option>Please Select ...</option>
            </select>
        </div>
        <div class="form-group col-lg-6">
            <label for="priority">Priority: <span class="required">*</span></label>
            <select name="priority" class="form-control" ng-options="p.ID as p.Title for p in Priorities" ng-model="web.Site">
            <option>Please Select ...</option>
            </select>
            </div>
    </div> <!-- Site / Priority -->

    <div class="row">
        <div class="form-group col-lg-6">
        <label for="dueDate">Division:</label>
        <input type="text" class="form-control" disabled="disabled" name="Division" ng-model="{{web.Division}}">
        </div>
        <div class="form-group col-lg-6">
        <label>Requestor:</label>
        <input type="text" class="form-control" disabled="disabled" name="requestor" value="{{web.Requestor}}">
         </div>
    </div> <!-- Division / Requestor -->

    <div class="row">
        <div class="form-group col-lg-6">
            <label for="create_date">Creation Date:</label>
            <input type="text" id="create_date" class="form-control datepicker" disabled="disabled" ng-model="{{}}">
        </div>
        <div class="form-group col-lg-6">
            <label for="dueDate">Due Date: <span class="required">*</span></label>
            <input type="text" class="form-control datepicker" placeholder="Click to choose a date" ng-model="{{due_date | date : 'MMM dd, yyyy'}}">
        </div>
    </div> <!-- CreationDate / DueDate -->

    <div class="row" ng-show="due_date < forward14Days">
        <div class="form-group col-lg-12">
            <label for="reason_rushed">Reason for Rushed Service: <span class="required">*</span></label>
            <textarea name="reason_rushed" class="form-control" rows="5"></textarea>
        </div>
    </div> <!-- Reason Rushed -->

    <div class="row">
<div class="form-group col-lg-12">
        <label for="pages">Page / Site URL (if applicable):</label>
            <textarea name="pages" class="form-control" rows="5"></textarea>
        </div>
    </div> <!-- Page / Site -->

    <div class="row">
        <div class="form-group col-lg-12">
        <label for="event_notes">Instructions: <span class="required">*</span></label>
        <textarea name="instructions" class="form-control" rows="5">{{web.Instructions}}</textarea>
        </div>
    </div> <!-- Instructions -->

    <div class="row" style="margin-top:30px;">
        <div class="form-actions col-lg-12">
        <button type="submit" class="btn btn-primary" ng-click=createNewWeb($event)>SUBMIT</button>
        </div>
    </div> <!-- Submit -->    
</form>

I tested it in the browser and had 13 errors like Token web.Division is unexpected and Unable to set property 'Title' of undefined or null reference The unable to set property Title is particularly confusing to me because, of course, its null .. the form hasn't been filled out yet.

Am I doing something wrong? OR Are Angular Form just too difficult to use? If so, what's the alternative if the rest of the app is Angular.

Thanks in advance!

Answer 1

I see a couple things wrong with your setup. It primarily involves your use of ng-model. You should never use {{ }} with ng-model. ng-model="{{web.Division}}". Instead do ng-model="web.Division". That will get you the binding that you're expecting. You have several cases where you are misusing the {{}} with a ngModel.

Also, don't use filters inside of ng-model. Filters like this: ng-model="{{due_date | date : 'MMM dd, yyyy'}}" would need to be handled within your controller or in a different way. You can apply this same date formatting using Angular filters inside javascript (as compared to doing it within HTML, refer to the docs to see how to do it)

As a general rule of thumb, don't use {{ }} within any directive that starts with ng. Those are Angular directives that are generally already aware of the $scope.

The other error that I came in when testing out your code was the assignments of:

$scope.web['Division'] = $scope.current_user.Division;
$scope.web['Requestor'] = $scope.loggedInUser.Title;

I assume you have those defined somewhere else in your app. I created a plunker here, and for my purposes I just set .Division and .Requestor to empty strings.