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>

但即使我点击展开，也会执行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>

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

我不清楚你对输入数据到底做了什么。

Angular.js /使用ng-submit和表单

2 个答案: