Angular.js /帶形式

使用納克提交我有一個HTML頁面形式塊Angular.js /帶形式

<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()不會被執行，如果其中一個領域是空的，並會顯示正確的信息。

來源

2015-04-06 MiddleWare

您是否試過爲該擴展按鈕添加'type =「按鈕」'道具？ – 2015-04-06 13:40:57

@BatuZet：不，我應該嗎？ – MiddleWare 2015-04-06 13:42:06

是的。這就是爲什麼我問實際兄弟:) – 2015-04-06 13:42:30

試試這個：

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

來源

2015-04-06 13:46:46 GAntoine

創建是一個按鈕，而不是輸入。我試圖用這種方式來改變它，但是提出了同樣的錯誤。 – MiddleWare 2015-04-06 13:55:05

我明白了，通常這發生在隱藏無效字段並且無效事件未被處理時。我通常會告訴你把novalidate放在form標籤中。 – GAntoine 2015-04-06 14:00:36

但我想驗證輸入 – MiddleWare 2015-04-06 14:34:56

最簡單的方式做表單驗證是這樣的：給您的表單的名稱屬性

<form name="myForm">

所需的屬性添加到您的輸入。

禁用您的按鈕，

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

如果你輸入一個是無效的，你同樣可以用SPAN或DIV具有NG秀=顯示消息「myForm的。$無效」的屬性。

我不清楚你正在處理輸入數據。

來源

2015-04-06 13:59:50 tpie

Angular.js /帶形式

回答

相關問題