Angular.js /将ng-submit与表单一起使用

Question

我有一个带有表单块的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>

但是，即使我单击Expand，也会执行create()而不是expand() 。

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

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

Answer 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>

Answer 2

进行表单验证的简单方法是这样的：给表单命名属性

<form name="myForm">

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

通过禁用按钮

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

如果您输入的内容之一无效，则可以同样显示具有ng-show =“ myForm。$ invalid”属性的span或div消息。

我不清楚您对输入数据的确切处理方式。