asked on

Angular JS form

Hi, I am new to Angular but am trying to learn!
I have developed a simple form to capture user contact details.

The form Submit button should only work when all the required fields of the form are validated but it does not work.

I'm hoping that someone can point me in the right direction.

Here's a picture of the form:

Here's my code:

  <ng-form name="frmEm" class="row" ng-if="IsEmail">
        <div class=" col-lg-6 col-md-6">
            <h3>Send Result as Email</h3>

            <div class="form-group">
                <select class="form-control" required name="title" ng-model="returnValues.title">
                    <option value="">Select</option>
                    <option value="">Mr</option>
                    <option value="">Mrs</option>
                    <option value="">Miss</option>
                    <option value="">Dr</option>
                </select>
            </div>

            <div class="form-group">
                <input class="form-control" placeholder="Firstname" type="text" required name="firstname" ng-model="returnValues.firstname" />
            </div>

            <div class="form-group">
                <input class="form-control" placeholder="Lastname" type="text" required name="lastname" ng-model="returnValues.Lastname" />
            </div>

            <div class="form-group">
                <input class="form-control" placeholder="Company name" type="text" name="companyName" ng-model="returnValues.companyName" />
            </div>

            <div class="form-group">
                <input class="form-control" placeholder="Enter Email Address" type="email" required name="em" ng-model="returnValues.Email" />
            </div>

            <div class="form-group">
                <input class="form-control" placeholder="Telephone Number" type="tel" required name="TelNo" ng-model="returnValues.TelephoneNo" />
            </div>

            <div class="form-group">
                <input class="form-control" placeholder="Address 1 (optional)" type="text" name="Address1" ng-model="returnValues.Address1" />
            </div>
            <div class="form-group">
                <input class="form-control" placeholder="Address 2 (optional)" type="text" name="Address2" ng-model="returnValues.Address2" />
            </div>
            <div class="form-group">
                <input class="form-control" placeholder="Address 3 (optional)" type="text" name="Address3" ng-model="returnValues.Address3" />
            </div>
            <div class="form-group">
                <input class="form-control" placeholder="Postcode (optional)" type="text" name="Postcode" ng-model="returnValues.Postcode" />
            </div>

            <div class="form-group">
                <input class="form-control" placeholder="Are you a robot?  What is 8+1?" type="text" name="Robot" ng-model="returnValues.Robot" />
            </div>

            <div class="form-group">
           <input type="checkbox" name="UserInfo" ng-model="returnValues.UserInfo" /> I agree to the  
                
                <a href="" data-toggle="tooltip" title="Metsa Wood Terms Of Service go here.">
                   Metsa Wood terms of service.
                </a>
            </div>
</div>
        
        <div class="col-lg-12">
            <input ng-disabled="frmEm.$invalid" type="button" class="btn btn-success" ng-click="SendEmail()" name=" name" value="Send" />
            <img style=" width: 34px !important;" class="" ng-if="IsLoadingEmail" src="~/Content/loader.gif" />
        </div>

    </ng-form> 
</div>

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SmashAndGrab

ASKER

*slaps hand on forehead* School girl error!!

SmashAndGrab

ASKER

May I also ask - is there a fancy Angular way of showing which of the inputs are required?

something like..

SmashAndGrab

ASKER

I can obvioulsy add an image but was wondering if Angular had anythong special ups its sleeve?

SmashAndGrab

ASKER

If you get a chance - could you look at my other question also?

https://www.experts-exchange.com/questions/28981499/Show-confirmation-alert-in-Jquery.html

Julian Hansen

(Thought this was posted already)
You can create a directive to prepend code to the front of them.

modulename.directive("required", function() {
   return {
       restrict: 'A', 
       compile: function(element) {
           element.prepend('<span class="required-field">*</span>');
       }
   }
}

Open in new window

However, if you know your required fields up front might as well add the code yourself when you create the form - can't see any benefit to doing it with a directive.

The input / select are both accessible via CSS as well

SmashAndGrab

ASKER

Thanks.

Youre probably right - I might as well do it with the form layout.

I thought there was a clever way of doing it as the controls have the "REQUIRED" property.

<input class="form-control" placeholder="Firstname" type="text" required name="firstname" ng-model="returnValues.firstname" />

Julian Hansen

Meant the last line to say

The input / select are available via CSS like so

input:required, select:required {
}

Open in new window

Angular is a framework for creating applications - interactions like form styling etc you need to add yourself. One option is to just have your required boxes a different colour rather than putting an asterisk there.