angularjs - 没有提交按钮的表单验证angularjs

Question

我想要验证没有提交按钮的表单。

    <div ng-controller="UserCreationCtrl">
        <form novalidate="novalidate" class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputUserLogin">User Login:</label>

                <div class="controls">
                    <input type="email" id="inputUserLogin" ng-model="user.userLogin" placeholder="User Login" required />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputFirstName">First name:</label>

                <div class="controls">
                    <input type="text" id="inputFirstName" ng-model="user.firstName" placeholder="First name"/>
                </div>
            </div>

            <div>
                <span  class="nullable">
                    <select ng-model="user.lookupId" ng-options="select as speciality.lookupName for speciality in specialityList" ng-change="selectedSpecilaty()">
                        <option value="">-- choose speciality --</option>
                    </select>
                </span>
            </div>
            <div> some extra other fields goes here</div>
            <div class="control-group">
                <div class="controls">
                    <a ng-click="cancel()" class="btn btn-info btn-xs">cancel</a>
                    <a ng-click="createNewUser()" class="btn btn-small btn-primary">create new user</a>
                </div>
            </div>

        </form>
    </div>

如何制作 userlogin(email) , firstname和 speciality必填字段， email字段必须验证为电子邮件。通常我们如何对没有提交按钮的表单进行验证。即，当我单击“创建新用户”链接时，应验证表单。

单击链接后发生错误时，表单应具有正确的字段数据，并且应仅显示错误字段旁边的错误消息或以红色字段显示。

我们可以在没有 Controller 的情况下对 html 本身中的表单进行客户端验证吗？

谢谢

Answer 1

在 $formName.$valid 中使用
所有必需的输入字段都需要 required 属性。

<form novalidate="novalidate" class="form-horizontal" name='myForm'>
 <a ng-click="createNewUser()" class="btn btn-small btn-primary" ng-disabled="!myForm.$valid">create new user</a>
</form>

http://plnkr.co/edit/6zVqTeW1WARIUcbS7dC9?p=preview