Kann die Eigenschaft '$ valid' von undefined nicht lesen, wenn das Formular in einem div mit ng-if-Bedingung liegt

Question

Ich habe ein Formular in einem div mit ng-if Bedingung. Anfangs ist das Formular geschlossen. Beim Klicken auf eine Schaltfläche wird das Formular angezeigt. Aber beim Senden des Formulars bekomme ich Cannot read property '$valid' of undefined Fehler. Wenn ich ändern ng-wenn in ng-Show, funktioniert es perfekt. Aber ich muss ng-if benutzen. Ich kann keinen Grund für einen Fehler finden. Und noch eine Sache, dass, wenn ich Fehler bekomme, ich auch Formularobjekt als Null bekomme. Wenn jemand die Antwort kennt, wird es geschätzt.

Hier ist mein 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'); 
    } 
} 

Answer 1

Übergeben Sie das Formular 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> 

Answer 2

ng-wenn Zustand der Komponenten in das DOM nicht hinzufügen, bis Zustand zufrieden, während die ng-show fügen Sie die Komponente in DOM hinzu und wenn die Bedingung erfüllt ist, wird sie angezeigt. Das ist also der Grund, warum es einen Fehler gibt, da es im DOM nicht verfügbar ist.