I'm trying to display a form using ng-if when the "add" button is clicked, but it's not working. I've looked at several examples and tried them all, but none have worked for me. Here is the code I am using:
angular.module('myFormApp', [])
.controller('CustomerController', function ($scope, $http, $location, $window) {
$scope.custModel = {
shown : false
};
$scope.showform = function () {
$scope.shown = true;
}
});
<div id="content" ng-controller="CustomerController">
<form name="frmCustomer" ng-show="custModel.shown" >
<div>
<input type="hidden" ng-model="custModel.Id" name="cid" />
</div>
<div>
<label for="email">Customer Name</label>
<input type="text" ng-model="custModel.CustName" name="cname" placeholder="" required ng-minlength="4" ng-maxlength="14" />
<span class="error" ng-show="(frmCustomer.$dirty||submitted) && frmCustomer.cname.$error.required">Customer name is Required</span>
<span class="error" ng-show="frmCustomer.$dirty && frmCustomer.cname.$error.minlength">Minimum length required is 5</span>
<span class="error" ng-show="frmCustomer.$dirty && frmCustomer.cname.$error.maxlength">Minimum length required is 15</span>
</div>
<div>
<label for="email">E-mail address</label>
<input type="email" ng-model="custModel.CustEmail" name="email" placeholder="" required />
<span class="error" ng-show="(frmCustomer.$dirty ||submitted) && frmCustomer.email.$error.required">EmailId is Required!</span>
<span class="error" ng-show="(frmCustomer.$dirty ||submitted) && frmCustomer.$error.email">Invalid EmailId!</span>
</div>
<div class="btn">
<input type="submit" value="Save" ng-click="saveCustomer()" ng-disabled="frmCustomer.$invalid">
<input type="submit" value="Update" ng-click="updateCustomer()" ng-disabled="frmCustomer.$invalid">
</div>
</form>
<button type="submit" ng-click="showform()" class="btn btn-default">Add Customer</button>
</div>