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!

var NewRequestController = function($scope){ $scope.web = {};// Set it with an object instead of an array — Boris Barroso
– Boris Barroso, Commented May 11, 2014 at 23:15

EnigmaRM · Accepted Answer · 2014-05-11 22:10:28Z

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.

answered May 11, 2014 at 22:10

EnigmaRM

7,61211 gold badges48 silver badges74 bronze badges

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

2 Comments

jgravois Over a year ago

Are you saying no {{}} even for text-areas? If so, how do you handle textareas?

EnigmaRM Over a year ago

textarea can be done with ng-model. Docs say that ng-model is intended for input, select, and textarea (and custom-made elements as well)

Collectives™ on Stack Overflow

AngularJS: Creating a New Form in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related