I am trying to disable the button if all inputs are not populated, If they are populated then the button is enabled.
I am also trying to print text under the input if no text is present in the input field, but only if user clicks on the disabled button.
My question
How do I alter my code to enable my button once text is present in all the input fields and if they are not and the user clicks on the disabled button show
<div ng-if="!myForm.Lname.$invalid">
<p>This field is required</p>
</div>
but only if text is not present in the input fields.
FULL CODE
<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>
You can do this by creating your own directive. I hope this will help you.
Here's a demo on 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.