Angular.js / 使用带有表单的 ng-submit答案

【问题标题】：Angular.js / Using ng-submit with formAngular.js / 使用带有表单的 ng-submit
【发布时间】：2015-04-06 21:59:50
【问题描述】：

我有一个带有表单块的 HTML 页面

<div>
   <form>
       <div class="row">
         ...
           <input required> a </input>
         ...
       <div>
       <div class="row">
         ...
           <input required> b </input>
         ...
       <div>
       <div>
            <button ng-click="expand()"> Expand </button>
            <button type="submit" ng-submit="create()"> Start </button>
       </div>
   </form>
</div>

当我单击开始时，a 或 b 为空，显示消息："Please fill out this field"（这是期望行为）。但是当我填写此字段并再次单击时，create() 未提交，我收到以下错误：An invalid form control with name='' is not focusable。

我也是这样尝试的：

   <div>
     <form ng-submit="create()">
       <div class="row">
         ...
        </div>
       <div>
            <button ng-click="expand()"> Expand </button>
            <button type="submit"> Start </button>
       </div>
      </form>  
    </div>

但是即使我点击展开，create() 也会被执行而不是expand()。

我也尝试将 ng-submit 更改为 ng-click，但它不会验证字段是否已填写。

我的目的是如果其中一个字段为空，create() 将不会被执行，并且会显示正确的消息。

【问题讨论】：

您是否尝试为该展开按钮添加 type="button" 属性？
@BatuZet：不，我应该吗？
是的。这就是我问兄弟的原因:)
@BatuZet：我将它添加到展开按钮，但是当我点击开始并且该字段不为空时，我仍然得到An invalid form control with name='' is not focusable.
那是因为类型按钮是默认的

标签： javascript html angularjs forms

【解决方案1】：

试试这个：

 <div>
   <form ng-submit="submit()">
     <div class="row">
       <input required type="text" ng-model="text" name="text_a">A</input>
     </div>
     <div class="row">
       <input required type="text" ng-model="text" name="text_b">B</input>
     </div>
     <div>
       <button ng-click="expand()"> Expand </button>
       <input type="submit" id="submit" value="Create" />
     </div>
   </form>  
 </div>

【讨论】：

创建是一个按钮，而不是一个输入。我尝试以这种方式更改它，但出现了同样的错误。
我明白了，这通常发生在隐藏无效字段且未处理无效事件时。我通常会告诉你将 novalidate 放在表单标签中。
但我想验证输入

【解决方案2】：

进行表单验证的简单方法如下：给你的表单一个名字属性

<form name="myForm">

将所需的属性添加到您的输入中。

使用

禁用您的按钮

<button ng-disable="myForm.$invalid" ng-click="create()">Submit</button>

如果您的某个输入无效，您同样可以显示一条带有 ng-show="myForm.$invalid" 属性的 span 或 div 的消息。

我不清楚您对输入数据的具体操作。

【讨论】：