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消息。

我不清楚您對輸入數據的確切處理方式。