角度表单验证无效

时间:2016-11-10 18:57:42

标签: javascript html angularjs

我是Angular的新手,并且在查看我构建此表单的教程之后尝试构建注册表单,但它没有验证。

以下是我正在使用的代码:

<div class="signup-cont cont form-container" ng-controller="signinSignUpController">
    <form id="login-form" name="signUpForm"  ng-submit="submitForm(signUpForm.$valid)" novalidate>
        <div class="form-group" ng-class="{ 'has-error' : signUpForm.name.$invalid && !signUpForm.name.$pristine }">
            <input type="name" name="name" id="usr-name" class="inpt form-control" placeholder="Your name" ng-model="name" ng-required="true"/>
            <label class="control-label" for="name">Your name</label>
            <span class="glyphicon glyphicon-remove form-control-feedback" ng-show="submitted && signUpForm.name.$invalid "></span>
            <p ng-show="submitted && signUpForm.name.$invalid" class="help-block">You name is required.</p>
        </div>

        <div class="form-group" ng-class="{ 'has-error has-feedback' : submitted && signUpForm.email.$invalid}">
            <label class="control-label" for="email">Your email</label>
            <input type="email" name="email" class="inpt form-control" ng-model="email" placeholder="Your email"  ng-required="true"/>
            <span class="glyphicon glyphicon-remove form-control-feedback" ng-show="submitted && signUpForm.email.$invalid"></span>
            <p ng-show="submitted && signUpForm.email.$invalid" class="help-block">Enter a valid email.</p>
        </div>

        <div class="form-group" ng-class="{ 'has-error has-feedback' : submitted && signUpForm.password.$invalid}">
            <label class="control-label" for="password">Your password</label>
            <input type="password" name="password" class="inpt form-control" ng-model="password" placeholder="Your Password" ng-required="true"/>
            <span class="glyphicon glyphicon-remove form-control-feedback" ng-show="submitted && signUpForm.password.$invalid"></span>
            <p ng-show="submitted && signUpForm.password.$invalid" class="help-block">Enter a valid email.</p>
        </div>

        <div class="submit-wrap">
        <input type="submit" class="form-control submit-signup btn btn-black-border btn-default" ng-disabled="signUpForm.$invalid" value="SIGN UP"/>
        <a href="#" class="more">Terms and conditions</a>
        </div>
    </form>
</div>

有人可以帮我理解我做错了什么。

2 个答案:

答案 0 :(得分:0)

将ng-model =“name”更改为ng-model =“user.name”,将ng-model =“password”更改为ng-model =“user.password”,将ng-model =“email”更改为ng-模型= “user.email”。

我已经检查过使用plunker工作正常。

答案 1 :(得分:0)

ng-show="submitted && signUpForm.name.$invalid"

submitted究竟是什么?如果这是控制器中的东西,似乎它被设置为false&amp;验证失败。查看此plunk没有提交的标志。

相关问题