如果表单在具有 ng-if 条件的 div 内，则无法读取未定义的属性 '$valid'

Question

我在 div 中有一个 表单，带有 ng-if 条件。最初表格是关闭的。单击一个按钮，将显示表单。但是在提交表单时，我收到 Cannot read property '$valid' of undefined 错误。如果我 将 ng-if 更改为 ng-show，它将完美运行 。但我必须使用 ng-if。我找不到错误的原因。还有一件事，在出现错误时，我还将 form 对象设为 null。如果有人知道答案，将不胜感激。

这是我的代码

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

ng-if 条件在满足条件之前不会将组件添加到 DOM 而 ng-show 添加DOM中的组件，当满足条件时显示。所以，这就是它给出错误的原因，因为它在 DOM.

上不可用

Answer 2

在 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>

如果表单在具有 ng-if 条件的 div 内，则无法读取未定义的属性 '$valid'

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

forms

angularjs

angularjs-validation

如果表单在具有 ng-if 条件的 div 内，则无法读取未定义的 属性 '$valid'

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

forms

angularjs

angularjs-validation

如果表单在具有 ng-if 条件的 div 内，则无法读取未定义的属性 '$valid'