adding data-ng-controller disruptive other data-ng properties

Question

Hi i am trying to build login form in asp.net environment that using angular to validate the input fields.

the problem is when i add

data-ng-controller="loginC"

disruptive other data-ng properties for example the user name is indeed valid but it still show me an error.

<input type="text" name="username" placeholder="username" data-ng-model="class="ng-pristine ng-untouched ng-valid" vm.username" data-ng-required="true" >

and the condition for the span is

<span data-ng-show="form.username.$invalid && form.username.$touched" 
class="help-block">Username is required</span>

this is the whole code:

<asp:Content ID="Content2" ContentPlaceHolderID="beforeLogin" Runat="Server">  
<div class="text-center" style="padding: 50px 0">

    <!-- Main Form -->
    <div class="login-form-1 " style="padding: 1%; border-radius: 10%">
        <div class="logo">Login</div>
        <section class="card register" data-ng-app="Login" data-ng-controller="loginC">
            <form name="form" class="text-left" data-ng-submit="vm.login()">
                <div class="login-form-main-message login-group"></div>
                <fieldset>
                    <div class="form-group" data-ng-class="{ 'has-error': form.username.$invalid && form.username.$touched}">
                        <input type="text" name="username" placeholder="username" data-ng-model="vm.username" data-ng-required="true" />
                        <span data-ng-show="form.username.$invalid && form.username.$touched" class="help-block">Username is required</span>
                    </div>
                    <div class="form-group" data-ng-class="{ 'has-error': form.password.$invalid && form.password.$touched }">
                        <input type="password" name="password" id="password" placeholder="Password" class="form-control" data-ng-model="vm.password" data-ng-required="true" />
                        <span data-ng-show="form.password.$invalid && form.password.$touched" class="help-block">Password is required</span>
                    </div>
                    <div class="form-actions" style="margin: 0 auto; width: 40%;">
                        <button type="submit" data-ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Login</button>
                        <a href="Registration.aspx" class="btn btn-link">Register</a>
                    </div>
                </fieldset>
            </form>
        </section>
    </div>
    <!-- end:Main Form -->
</div>

note again when i am remove the data-ng-controller everything work good

Did you try changing `ng-controller="loginC as vm"`. The `vm` part of the validation logic requires the controller to be named so. — nipuna-g, Jul 14 '17 at 02:59
Also, what is in the controller? Has it already been exported as `vm`? — nipuna-g, Jul 14 '17 at 03:00
you are right i added this and it worked, but i did not understand your explanation — Yonatan Amir, Jul 14 '17 at 19:26

score 0 · Accepted Answer · answered Jul 15 '17 at 04:05

AngularJS follows the MV* Pattern. So your view(ie- the html) talks to the application logic through a 'controller'.

When you setup data-ng-controller, the view has a reference to it's scope. You can access the controllers values by using $scope.value syntax. By default, you can access functions and values of the controller by using the $scope.value syntax. But in this example,vm.value is used. . Such as - vm.login(), vm.dataLoading.

This syntax assumes that there is a controller with an alias of vm. But the controller is imported without an alias. This question goes in to more detail about aliases. There for, the view has no reference of the vm controller and the vm.username value is undefined and doesn't validate.

Using the 'controller as' syntax would would fix the problem with the username. ng-controller="loginC as vm". But you will need to keep consistency when calling methods and accessing values in order for all the functionality to work.

i got it, but how it's worked before i wrote the ng-controller command? — Yonatan Amir, Jul 15 '17 at 06:24
@YonatanAmir Is there by any chance, a controller imported as 'vm' in a parent of this component? If so, that might be the cause for it to work. Or it could be that since a controller was not defined, the functionality didn't work at all. Failing without giving an error. — nipuna-g, Jul 15 '17 at 07:08

adding data-ng-controller disruptive other data-ng properties

1 Answers1