javascript - AngularJS:输入有效的电子邮件地址后启用提交按钮

Question

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

这是我到目前为止所拥有的:

我有一个ui-view:

<div ui-view></div>

在此 View 中，我加载主模板:

应用程序配置:

   $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，并且仅当存在有效电子邮件时才会启用

请查看文档和示例，

希望对你有帮助

乌鲁别克