在 ng 开关中从 ng 表单设置输入的 ng 要求有效性

我想设置输入字段的有效性。我知道我可以做： $scope.SOME_FORM_NAME.SOME_INPUT_NAME.$setValidity("required", true);

问题是我需要先访问它。我当前的页面结构看起来像这样：

<div ...>   <!-- bootstrap -->
  <div ...>
    <div ng-switch="type">
      <div ng-switch-when="type_1">
        <div ...>
          <ng-form name="myForm" ng-submit="firstFunction()">
            <div ...>
              <input name="myInput" ng-model="some_model_1" ng-required="true" />
            </div>
          </ng-form>
        </div>
      </div>
      <div ng-switch-when="type_2">
        <div ...>
          <ng-form name="myForm" ng-submit="secondFunction()">
            <div ...>
              <input .../>  <!-- Other inputs without validity -->
            </div>
          </ng-form>
        </div>
      </div>

甚至短：

ng-switch
  ng-form name="myForm"
    input name="myInput"

这将使我的有效性设置器：$scope.myForm.myInput.$setValidity("required", true);。除了ng-switch使我立即访问myForm。

这是console.log($scope)吐出的。

$$ CHILDSCOPE：ƒCHILDSCOPE（）
$$ childhead：childscope {$$ childtail：范围，$$ childhead：范围，$$ sextsibling：null，$$ watchers：array（61），$$听众：{…}，…}
$$ childtail：childscope {$$ childtail：范围，$$ childhead：范围，$$ sextsibling：null，$$ watchers：array（61），$$听众：{…}，…}
$$ listerercount：{$ destion：11，uib：datepicker.mode：1}
$$听众：{}
$$ sextsibling：null
$$ prevsibling：范围{$$ childtail：childscope，$$ childhead：childscope，
$$ sextsibling：范围，$$观察者：数组（2），$$听众：{…}，…}
$$观察者：[{…}，$$ DigestWatchIndex：-1]
$$ watcherscount：65
$ id：6
$ parent：scope {$$ childtail：范围，$$ childhead：范围，$$ sextsibling：null，$$ watchers：null，$$侦听器：{…}，…}，…}
$ resolve：{$ transition $：transition，$ stateparams：{…}，$ state $：{…}}
类型：type; type_1＆quot;

我只能从$$childHead和$$childTail中看到myForm，因此我需要更改一些让我以不同方式访问表单的东西。

（我是否更改结构，以便与ng-switch一起使用，如果是的话，我如何使用其他绕过ng-switch的东西？）

控制输入的 required属性，使用 ng-required指令的角度表达式。

  <ng-form name="myForm" ng-submit="firstFunction()">
      <input name="myInput" ng-model="some_model_1"
       ng-required="myInputRequired" />
  </ng-form>

然后在控制器中：

 $scope.myInputRequired = true;

我使用模型变量，required属性将设置为ng-switch指令实例化<input>元素。

演示

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app>
    <form name="form1" ng-init="type='type_1'">
    <div ng-switch="type">
      <div ng-switch-when="type_1">
          <ng-form name="myForm" ng-submit="firstFunction()">
              <input name="myInput" ng-model="some_model_1"
               ng-required="myInputRequired" />
          </ng-form>
        </div>
      </div>
    </form>  
    <input type="checkbox" ng-model="myInputRequired"/>
    myInputRequired={{myInputRequired}}
    <br>
    <input type="checkbox" ng-model="type" ng-true-value="'type_1'">
    type={{type}}
    <br>
    <p ng-show="form1.myForm.$error.required">
      ERROR: Input required
    </p>
  </body>

相关内容

最新更新

热门标签：