Question

这是我的第一个AngularJS联系表（AngularJS的新用户）。我已经阅读了很多关于这个问题的帖子并尝试了很多解决方案，但我无法理解。看起来很简单，但我很难过。

我想禁用“提交”按钮，直到填写了所需的输入（电子邮件和评论）。

此外，电子邮件和评论错误消息会立即显示在页面加载上，而不是等待模糊。

这是正确的js（我使用的脚本来自教程，我误解了）：

angular.module('contForm', [])
    .controller('contCtrl', function ($scope) {
    $scope.user = {};
})

<form ng-app="contForm" ng-controller="contCtrl" name="mailForm" novalidate>
    <input type="text" name="name" ng-model="user.name"  size="31" maxlength="50"><br>

    <input type="text" name="phone" ng-model="user.phone" size="31" maxlength="12"><br>

    <span ng-show="mailForm.email.$touched && mailForm.email.$invalid">Please enter your email address. </span> 

    <input type="email" name="email" ng-model="user.email" size="31" maxlength="100" required><br>

    <span ng-show="mailForm.contComments.$touched && mailForm.contComments.$invalid">Please enter your comments. </span>                        

    <input type="text" name="contComments" ng-model="user.comments" required><br>

    <input type="submit" name="subComments" value="SEND" ng-disabled="mailForm.$invalid">
</form>

Answer 1

我找不到那个错误，我认为你的来源不完整，我使用的是cdn angularjs。

input.btn[disabled] {
  background: red;
}

<!DOCTYPE html>
<html >
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>

    <form ng-app="app" ng-controller="ctrl" name="mailForm" novalidate>
        <input type="text" name="name" ng-model="user.name" size="31" maxlength="50"><br>

        <input type="text" name="phone" ng-model="user.phone" size="31" maxlength="12"><br>

        <span ng-show="mailForm.email.$touched && mailForm.email.$invalid">Please enter your email address. </span>

        <input type="email" name="email" ng-model="user.email" size="31" maxlength="100" required><br>

        <span ng-show="mailForm.contComments.$touched && mailForm.contComments.$invalid">Please enter your comments. </span>

        <input type="text" name="contComments" ng-model="user.comments" required><br>

        <input class="btn" type="submit" name="subComments" value="SEND" ng-disabled="mailForm.$invalid">
    </form>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
    <script>
        var app = angular.module("app", []);

        app.controller("ctrl", function ($scope) {

        });
    </script>
</body>
</html>

ng-disabled无法处理AngularJS 1.4.8中的“提交”按钮

1 个答案: