Cannot read property '$valid' of undefined if form is inside a div with ng-if condition

Question

I have a form inside a div with ng-if condition. Initially form is closed. On click a button, form is displayed. But on submitting form, I'm getting Cannot read property '$valid' of undefined error. If I change ng-if into ng-show, it works perfect. But I must have to use ng-if. I can't find reason of error. And one more thing that, on getting error, I'm also getting form object as null. If any one knows the answer, it will be appreciated.

Here is my code

HTML

<div id="addCommentDiv" ng-if="showAddCommentForm == true">
    <form id="formAddComment" name="formAddComment" novalidate>
        <textarea id="taAddComment" name="taAddComment" placeholder="Add a comment.." ng-model="new_comment" ng-maxlength="1000" ng-required="true"></textarea>
        <button type="button" ng-click="addComment()" ng-disabled="addCommentDisabled">Ok</button>
    </form>
</div>

JS

$scope.addCommentDisabled = false;
$scope.addComment = function () {
    if ($scope.formAddComment.$valid) {
        console.log('valid');
    }
}

See [this](https://github.com/turinggroup/angular-validator/issues/14). My issue is also same. — Akshay Vaghasiya, Sep 09 '16 at 07:11
But I have not used that library. I have used only angularjs. — Akshay Vaghasiya, Sep 09 '16 at 07:12

score 7 · Accepted Answer · answered Sep 09 '16 at 09:37

7

Pass the form in addComment - fiddle

$scope.addComment = function (formAddComment) {
 console.log('valid');
 if (formAddComment.$valid) {
    console.log('valid');
 }
}

 <button type="button" ng-click="addComment(formAddComment)" ng-disabled="addCommentDisabled">Ok</button>

answered Sep 09 '16 at 09:37

Disha

822
1
10
39

can you explain that why I need to pass form in this case? – Akshay Vaghasiya Sep 12 '16 at 05:19
you can go through this link - https://docs.angularjs.org/api/ng/directive/ngIf ... – Disha Sep 12 '16 at 06:23
Thanks Disha, it works good! @AkshayVaghasiya because ng-if creates new scope – Zvi Apr 26 '18 at 09:00

score 0 · Answer 2 · answered Sep 09 '16 at 07:19

0

ng-if condition doesn't add the components into the DOM until condition is satisfied whereas the ng-show add the the component in DOM and when condition is satisfied, it displays. So ,that's the reason it is giving error as it is not available on the DOM.

answered Sep 09 '16 at 07:19

Aanchal Gupta

1
1

@AnchalGupta, I know that. But there must be some solution as google team must have concerned that issue. Do you know the solution or alternate way? I have tried to recompile that div element. But still same problem. – Akshay Vaghasiya Sep 09 '16 at 07:42

Cannot read property '$valid' of undefined if form is inside a div with ng-if condition

2 Answers2

Linked