AngularJs：ng内的表单-如果无法从控制器访问答案

【问题标题】：AngularJs: Form inside ng-if not accessible from controllerAngularJs：ng内的表单-如果无法从控制器访问
【发布时间】：2016-11-17 07:05:44
【问题描述】：

我在ng-if 指令中有一个表单。我想使用$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>

并尝试检查控制器中的有效表单

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

但无法从控制器访问表单。

【问题讨论】：

尝试删除$parent？

标签： javascript angularjs

【解决方案1】：

ngIf 指令根据 {expression} 删除或重新创建 DOM 树的一部分。如果分配给 ngIf 的表达式的计算结果为 false 值，则从 DOM 中删除该元素，否则将该元素的克隆重新插入 DOM。您可以通过此链接doc 以及我的答案answer

如果对您可行，您可以使用 ng-show 代替 ng-if。

【讨论】：

【解决方案2】：

当您在控制器中使用辅助对象时，它可以正常工作。

在你的控制器文件中

$scope.page = {
    creditForm:null
};

在您的 HTML 文件中

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

在这个模型中，你可以在 ng-if 中安全地使用 ng-form

【讨论】：

【解决方案3】：

发生这种情况是因为 ngIf 创建了一个新范围，因此 name="form" 将在该新范围（它是 ctrl 范围的子级）上注册表单控制器。您可以通过绑定到目标范围上的现有对象来解决此问题。（或者，您可以绑定到控制器并使用 controllerAs 语法，这通常被认为是一种很好的做法。）

这是因为原型继承在 JavaScript 中的工作方式。

您可以在此处找到示例 plunker <form name="data.form" novalidate ng-if=true> http://plnkr.co/edit/2Ip3gNPdUWWV0zK8PNJr?p=preview

【讨论】：

【解决方案4】：

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

【讨论】：