Search code examples
javascripthtmlangularjsflaskstormpath

Cannot submit form using AngularJS + Stormpath


I have an issue with form submission, when I submit my form nothing happens, but seems like login and password data should be sent correctly. I am trying to submit a form without ngSubmit, because in my case it is impossible (my inputs are dynamically generated by Stormpath + Flask), anyway, I would like to avoid submit using angular directives, if possible.

Here is the code of the form:

<!-- Login -->
<div class="center-block lc-block" id="l-login" data-ng-class="{ 'toggled': lctrl.login === 1 }"
 data-ng-if="lctrl.login === 1">
<form role="form" method="post">
        {% with messages = get_flashed_messages() %}
        {% if messages %}
        <div class="alert alert-danger alert-dismissible" role="alert">
            <span type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
            </span>
            {% for message in messages %}
            {{ message }}
            {% endfor %}
        </div>
        {% endif %}
        {% endwith %}
        {{ form.hidden_tag() }}
    <div class="block-header">
        <h3>Sign In</h3>
    </div>
    <div class="input-group m-b-20">
        <span class="input-group-addon"><i class="zmdi zmdi-account"></i></span>
        <div class="fg-line">
            {% if config['STORMPATH_ENABLE_USERNAME'] %}
            {{ form.login(autofocus='true', class='form-control', placeholder='Username', required='true') }}
            {% else %}
            {{ form.login(autofocus='true', class='form-control', placeholder='Username or Email', required='true')
            }}
            {% endif %}
        </div>
    </div>

    <div class="input-group m-b-20">
        <span class="input-group-addon"><i class="zmdi zmdi-male"></i></span>
        <div class="fg-line">
            {{ form.password(class='form-control', placeholder='Password', required='true') }}
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="checkbox">
        <label>
            <input type="checkbox" value="">
            <i class="input-helper"></i>
            Keep me signed in
        </label>
    </div>

    <button class="btn btn-login btn-danger btn-float" type="submit" value="submit"><i
            class="zmdi zmdi-arrow-forward"></i></button>

    <ul class="login-navigation">
        <button style="margin-right:10px;" class="btn bgm-lightblue waves-effect" data-ng-click="lctrl.login = 0; lctrl.register = 1">Create Account</button>
        <button class="btn btn-warning waves-effect" data-ng-click="lctrl.login = 0; lctrl.forgot = 1">Forgot Password?</button>
    </ul>
</form>

All inputs are dynamically generated by Stormpath. What can be possibly wrong here?


Solution

  • This solution solved my problem https://calendee.com/2013/10/15/preventing-angularjs-from-hijacking-forms/