Question

如果未填充所有输入，我试图禁用该按钮，如果填充了这些按钮，则启用该按钮。

如果输入字段中没有文字，我也会尝试在输入下打印文字，但前提是用户点击了禁用按钮。

我的问题

如果所有输入字段中都有文本，如何更改我的代码以启用我的按钮，如果不是，并且用户点击了禁用的按钮，则如何显示

<div ng-if="!myForm.Lname.$invalid">
    <p>This field is required</p>
</div>

但仅限于输入字段中不存在文本。

完整代码

<div class="form-group">
    <label for="first-name">First Name*</label>
    <input type="text" class="form-control" name="Fname" placeholder="Enter first name" ng-model="formData.Fname"  ng-required="true">
     <div ng-if="!myForm.Fname.$invalid">
        <p>This field is required</p>
    </div>
</div>

<div class="form-group">
    <label for="last-name">Last Name*</label>
    <input type="text" class="form-control" name="Lname" placeholder="Enter last name" ng-model="formData.Lname" ng-required="true">
    <div ng-if="!myForm.Lname.$invalid">
        <p>This field is required</p>
    </div>
</div>

<div class="form-group">
    <label for="email">Email*</label>
    <input type="email" class="form-control" name="email" placeholder="Enter a valid email address" ng-model="formData.email" ng-required="true">
</div>

<div class="form-group row">
    <div class="col-xs-6 col-xs-offset-3">

        <button ui-sref="form.select" class="btn btn-block btn-info" ng-disabled="!myForm.Fname.$valid">
            Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
        </button>

    </div>
</div>

Answer 1

您可以通过创建自己的指令来完成此操作。我希望这会对你有所帮助。

以下是Jsfiddle

的演示

HTML：

<div ng-app="sampleapp">
<div ng-controller="samplecontoller" ng-init="showData()">
 <form name="form" disable-btn ng-submit="submitForm()">
   <div>
   <label>First Name:</label>
     <input type="text" placeholder="First Name" ng-model="model.name" required>
  </div>
  <div>
    <label>Last Name:</label>
    <input type="text"placeholder="Last Name"  ng-model="model.lname" required>
   </div>
  <div>
    <button class="btn btn-primary" type="submit">Submit</button>
  </div>
</form>  
</div>

使用角度js进行表单输入验证

1 个答案: