Question

我正在AngularJS中构建一个简单的演示，以帮助我理解它是如何工作的。我想要实现的下一个任务是仅在输入有效的电子邮件地址时启用提交按钮。我想知道从哪里开始，以及我需要了解实现这样的功能。例子很完美。

这是我到目前为止所做的：

我有ui-view：

<div ui-view></div>

在此视图中，我加载了我的主模板：

的app.config：

   $stateProvider
        .state('route1', {

            url: "/ID/:slug",
            templateUrl: "/static/sign_up.html",
            controller: "myData"
        })

myData只是加载我使用的一些ajax。

模板sign_up.html ：

<h1>{{ data.name }}</h1>
<form action="">
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <label class="col-lg-3 control-label" for="id_email">Email
                    *</label>

                    <div class="col-lg-9">
                        <input class="form-control" id="id_email" name="email"
                        type="text">
                    </div>
                </div><button class="btn btn-lg" type="submit">Submit</button>
            </div>
        </div>
    </form>

Answer 1

查看此链接以获取有关验证AngularJS中的电子邮件的文档。它也有很好的例子。

http://docs.angularjs.org/api/ng.directive:input.email

它的工作方式是，您将表单命名为“MyForm”（例如），一旦此表单中包含type="email"的输入字段包含有效的电子邮件，myForm.$error.email就会变为false ，因此您可以使用ng-disabled这样设置提交按钮：

<button class="btn btn-lg" type="submit" ng-disabled="myForm.$error.email">Submit</button>

因此，默认情况下ng-disabled = true，只有在有效的电子邮件

时才会启用

请查看文档和示例，

希望它有所帮助，

乌卢格别克

Answer 2

为表单命名，然后使用以下内容...（另外，请在注释中查看文档）

<button class="btn btn-lg" type="submit" ng-disabled="yourform.$invalid">Submit</button>

AngularJS：在输入有效的电子邮件地址时启用提交按钮

2 个答案: