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

Question

I have an HTML page with form block

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

When I click on start, and a or b are empties, message is shown: "Please fill out this field" (which it is the desire behavior) . But when I fill out this field, and click again, create() is not submitted and I get the following error: An invalid form control with name='' is not focusable .

I try also in this way:

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

But then even if I click on Expand, create() is executed instead of expand() .

I also try yo change ng-submit to ng-click, but then it doesn't validate that the fields is fill out.

My purpose is that create() will NOT be executed if one of the fields is empty, and proper message will be shown.

Answer 1

Try this:

 <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

The simple way to do form validation is like this: Give your form a name attribute

<form name="myForm">

Add the required attribute to your inputs.

Disable your button with

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

If one of your inputs is invalid you can likewise display a message with a span or div that has the ng-show="myForm.$invalid" attribute.

I'm not clear on exactly what you are doing with the data from the inputs.