I have a AngularJs form which contains textbox,textarea,dropdown,checkbox, date, time controls, ng-repeat textbox and textarea controls. I want to validate these controls only on submit button click event using Angular JS. Below is the existing code. The error message should not be visible on initial load or any index change event.
<div ng-controller="testController" ng-init="init()">
<div class="container" ng-show="createMenu">
<br />
<div class="row">
<div class="col-sm-2">
<label class="control-label">test:</label>
</div>
<div class="col-sm-4 form-group">
<select name="testTypeSelect" ng-model="selectedtestType" ng-options="test.testTypeName for test in tests" ng-change="updateImageUrl(selectedtestType)">
<option value="">-- Select the test --</option>
</select>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" ng-model="testName" name="testName" />
</div>
</div>
<br />
<div class="row">
<div class="form-group ">
<label class="form-group col-md-3">Language</label>
<label class="form-group col-md-4">Title</label>
<label class="form-group col-md-5"> Description</label>
</div>
</div>
<div class="row">
<div>
<div ng-repeat="Descriptions in testsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" input-md" name="titleValidate[]" ng-model="Descriptions.Title" />
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" name="descriptionValidate[]" noresize ng-model="Descriptions.Description"></textarea>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer"><img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" /> </a>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 ">
<label>Delivery Method</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-2" ng-repeat="method in deliveryMethods">
<input type="checkbox" id="{{method.id}}"
value="{{method.value}}" name="deliveryMethod[]" ng-model="method.selected"
ng-click="toggleSelection(method.value)" ng- ="value.length==0"> {{method.value}}
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" value="Submit" ng-click="add()" />
<input type="button" id="btnReset" value="Cancel" ng-click="reset()" />
</div>
How to validate the form on submit button click event? Thanks