AngularJs: Form inside ng-if not accessible from controller

Question

I have a form inside ng-if directive. I want to check the form validation in controller using $valid.

    <div ng-if="paymentMethod == 12">
    <form name="creditForm" id="cc-form" novalidate>
        <div class="form-group">
            <label for="cardNumber">Card Number</label>
            <input type="text" autofocus class="form-control" name="card_number" ng-minlength="16" id="cardNumber" ng-model="creditCardNumber" required>
            <div class="red-text" ng-messages="creditForm.card_number.$error" ng-if="creditForm.card_number.$dirty || creditForm.$submitted">
                <div ng-message="required">##global.Card_Num_Required##</div>
                <div ng-message="maxlength">##global.Card_Num_MinLength##</div>
                <div ng-message="minlength">##global.Card_Num_MaxLength##</div>
                <div ng-message="minlength">##global.Card_Num_Numeric ##</div>
            </div>
        </div>

and trying to check valid form in controller

  if ($scope.$parent.creditForm.$valid) { 
      alert('valid');
      } else {
     alert('not valid');
 }

but the form is not accessible from controller.

Answer 1

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. you can go throgh this link doc and also my answer here answer

You can use ng-show instead of ng-if if its feasible to you.

Answer 2

It works fine when you use auxiliary object in your controller.

In Your Controller file

$scope.page = {
    creditForm:null
};

in your HTML file

<div ng-if="paymentMethod == 12">
<ng-form name="page.creditForm" id="cc-form" novalidate>
    <div class="form-group">
        <label for="cardNumber">Card Number</label>
        <input type="text" autofocus class="form-control" name="card_number" ng-minlength="16" id="cardNumber" ng-model="creditCardNumber" required>
        <div class="red-text" ng-messages="page.creditForm.card_number.$error" ng-if="page.creditForm.card_number.$dirty || page.creditForm.$submitted">
            <div ng-message="required">##global.Card_Num_Required##</div>
            <div ng-message="maxlength">##global.Card_Num_MinLength##</div>
            <div ng-message="minlength">##global.Card_Num_MaxLength##</div>
            <div ng-message="minlength">##global.Card_Num_Numeric ##</div>
        </div>
    </div>
</ng-form>

in this model you can saftly use ng-form inside ng-if

Answer 3

This happens because ngIf creates a new scope, so name="form" will register the form controller on that new scope (which is a child of the ctrl scope). You can solve this, by binding to an existing object on the target scope. (Alternatively, you can bind to the controller and use the controllerAs syntax, which is generally considered a good practice.)

This is because of how prototypal inheritance works in JavaScript.

You can find a sample plunker here <form name="data.form" novalidate ng-if=true> http://plnkr.co/edit/2Ip3gNPdUWWV0zK8PNJr?p=preview

Answer 4

$scope.$watch('creditForm.$valid', function(newVal) {
            //$scope.valid = newVal;
            alert('valid');
        });