javascript - AngularJS - 如何仅对活动字段使用 ng-required
问题描述
- 我有一个切换按钮所在的应用程序,当单击它时,它会激活用户输入字段。
- 字段在一页上,按钮调用如下:
<span ng-include="'partials/triggers/toggleButton.html'"></span>
<a ng-click="toggle()">
<span class="glyphicon" ng-class="{'glyphicon-ban-circle': t.active, 'glyphicon-ok-circle': !t.active}"></span>
</a>
<div ng-controller="TriggerController" ng-init="init(relay, 'inactiveFor')">
<fieldset class="form-group sentinel-line" ng-disabled="!t.active">
<div class="form-group" bs-has-error>
<input type="text" name="timerEveryMinute" class="form-control" ng-model="t.on.val" ng-pattern="/^(((([1-9])|([1-9][0-9])|([1-9][0-9][0-9])|([1-9][0-9][0-9][0-9]))))$/"/> minutes
<span ng-show="form.timerEveryMinute.$invalid && showInvalids" class="formError">Incorrect value</span>
</div>
<span style="color:#B40404" class="help-block" ng-show="!form.timerEveryMinute.$valid">
Invalid! Must be number with max four digits, without decimals.
<br>Correct: "2" or "23" or "2323" . Incorrect: "2,32" or "23.2" or "232323" .
</span>
<div class="form-group" bs-has-error>
<input type="text" name="timerForMinute" class="form-control" ng-model="t.off.val" ng-pattern="/^(((([1-9])|([1-9][0-9])|([1-9][0-9][0-9])|([1-9][0-9][0-9][0-9]))))$/"/> minutes...
<span ng-show="form.timerForMinute.$invalid && showInvalids" class="formError">Incorrect value</span>
</div>
<span style="color:#B40404" class="help-block" ng-show="!form.timerForMinute.$valid">
Invalid! Must be number with max four digits, without decimals.`
`<br>Correct: "2" or "23" or "2323" . Incorrect: "2,32" or "23.2" or "232323" .
</span>
<span ng-include="'partials/triggers/toggleButton.html'"></span>
</fieldset>
</div>
- 仅当通过切换按钮激活字段时,如何使字段为必填(非空)?正则表达式在这里不起作用,它仅在用户进行一些输入时才起作用。
整个代码在这里: https ://github.com/romanicak/growduino-client/tree/master/src
解决方案
在控制器中使用变量来跟踪字段是否是必需的:
$scope.isRequired = false;
单击按钮时,切换该变量
<button ng-click="isRequired = !isRequired">
在您的输入中,将要求绑定到该变量:
<input type="text" ng-model="myinput" ng-required="isRequired" />
而已。即使您没有在控制器中定义变量,它也会起作用。
推荐阅读
- sql - 从 bigint 到 datetimestamp 的日期转换
- datastage - 如何在 ibm datastage 中更新数据库
- linux - 使用 bash 打印每行的最后 n 个字符
- database - 如何使用 Liquibase 处理多个模式
- flutter - 是什么意思 ”!。” 在飞镖?“!”的等效代码是什么?? -扑
- java - 为什么这个 4 字节的十六进制数不能转换成 int?
- airflow - 如何在以编程方式触发 dag 时跳过任务
- mysql - 将主键转换为mysql中的唯一键
- python - 十六进制字符串列表到十六进制文字
- python - Django ImportError:使用 Docker 时无法导入 Django