AngularJS:当输入有效的电子邮件地址时，启用提交按钮

AngularJS: enable a submit button when a valid email address has been entered

本文关键字：启用 提交 按钮 电子邮件地址 输入 有效 AngularJS      更新时间：2023-09-26

我正在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>

查看此链接以获取有关在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，只有当存在有效的电子邮件时才启用

请查看文档和示例，

希望有帮助，

Ulugbek

命名表单，然后使用以下。。。（此外，请查看注释中的文档）

<button class="btn btn-lg" type="submit" ng-disabled="yourform.$invalid">Submit</button>
相关文章：