禁用提交按钮作为默认状态，直到所有输入都填写在angular js中

Disable submit button as default state until all inputs are filled in angular js

本文关键字：输入 js angular 按钮 提交 默认 状态      更新时间：2023-09-26

我正在尝试禁用提交表单，直到所有字段都被填充。

我尝试在按钮中添加disable选项，但它不起作用。

这是形式：

<form id="contactForm" name="contactForm" novalidate>
    <input type="text" name="contactName" id="contactName" placeholder="Nombre" data-ng-model="cu.contactName" ng-model-options="{ updateOn: 'blur' }" required autofocus>
    <span style="color:red" ng-show="contactForm.contactName.$dirty && contactForm.contactName.$invalid">
        <span ng-show="contactForm.contactName.$error.required">El nombre es requerido.</span>
    </span>
    <button class="hvr-bounce-to-right" type="submit" ng-disabled="contactForm.contactName.$dirty && contactForm.contactName.$invalid" name="submit-form" ng-click="cu.sendMail()">Enviar mensaje &ensp; <span class="icon flaticon-envelope32"></span></button>
</form>

现在，当我开始打字时，按钮会被禁用，然后删除输入中的所有内容，当我试图点击时，它会被禁用。但我想要的是，按钮从一开始就被禁用，当你填写输入时，它就会被解锁或取消禁用（如果这是一个词的话）。

请帮忙，谢谢！

有角度的文档实际上非常适合表单状态处理：

https://docs.angularjs.org/guide/forms

检查倒数第二个例子，如果电子邮件无效，他们会显示一条消息。

每个输入的每个状态都应该反映在作用域/控制器中。

所以假设你有这个：

$scope.myInputs = {};

您应该将视图中的每个输入建模为：

ng-model = "myInputs.email";

然后，使用ng-flur/ng-change，您应该遍历$scope.myInputs对象中的每个属性，以查看值是否已填充。只有这样，您才能控制提交的禁用。

我可以通过添加以下$pristine属性来解决此问题：

User has not interacted with the field yet.

所以我的按钮现在看起来是这样的：

<button class="hvr-bounce-to-right" type="submit" ng-disabled="contactForm.contactName.$dirty && contactForm.contactName.$invalid || contactForm.contactName.$pristine" name="submit-form" ng-click="cu.sendMail()">Enviar mensaje &ensp; <span class="icon flaticon-envelope32"></span></button>

现在，它从一开始就被禁用，并且只有在用户交互并填充（在本例中）contactName输入时才启用它自己。

相关文章：