代码之家 › 专栏 › 技术社区 › Aleksey Solovey

从ng开关内的ng窗体设置输入的ng所需有效性

angularjs

Aleksey Solovey · 技术社区 · 7 年前

$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:Scope,$$childHead:Scope,$$nextSibling:null,$$watchers:Array(61),$$listeners:{},}

$$childTail:ChildScope{$$childTail:Scope,$$childHead:Scope,$$nextSibling:null,$$watchers:Array(61),$$listeners:{–k},а}

$$listenerCount:{$destroy:11,uib:datepicker.mode:1}

$$侦听器:{}

$$nextSibling:null

$$previsibling:Scope{$$childTail:ChildScope,$$childHead:ChildScope,

$$nextSibling:Scope,$$watchers:Array(2),$$listeners:{–Ì俣},俣俣俣俣}

$$watchers:[{},$$digestWatchIndex:-1]

$$watchersCount:65

$id:6

$parent:Scope{$$childTail:Scope,$$childHead:Scope,$$nextSibling:null,$$watchers:null,$$listeners:{},}

$resolve:{$transition$:transition,$stateParams:{},$state$:{}

类型:“type_1”

我只能看到 我的表单 从…起 $$childHead 和 $$childTail ,所以我需要改变一些东西,让我以不同的方式访问表单。

(我是否要改变结构,使其与ng switch一起工作,如果是,那么如何工作?或者我是否要使用其他绕过ng switch到ng form的方法?)

1 回复 | 直到 4 年前

georgeawg 7 年前

控制 required 属性,将角度表达式与 ng-required directive .

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

 $scope.myInputRequired = true;

我使用模型变量 必修的 属性将在 ng-switch 指令实例化 <input> 要素

The DEMO

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

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前