AngularJS - 如何仅对活动字段使用 ng-required [英] AngularJS - how to use ng-required only for active fields

问题描述

• 我有一个应用程序，其中有切换按钮，当点击它时，它会激活用户输入的字段.
• 字段在一页上，按钮的调用方式如下:

<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]))))$/"/>分钟<span ng-show="form.timerEveryMinute.$invalid && showInvalids" class="formError">值不正确</span>

<span style="color:#B40404" class="help-block" ng-show="!form.timerEveryMinute.$valid">无效的！必须是最多四位数字，不能有小数.<br>正确: "2" 或 "23" 或 "2323" .不正确: "2,32" 或 "23.2" 或 "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]))))$/"/>分钟...<span ng-show="form.timerForMinute.$invalid && showInvalids" class="formError">值不正确</span>

<span style="color:#B40404" class="help-block" ng-show="!form.timerForMinute.$valid">无效的！必须是最多四位数字，不带小数.``<br>正确: "2" 或 "23" 或 "2323" .不正确: "2,32" 或 "23.2" 或 "232323" .</span><span ng-include="'partials/triggers/toggleButton.html'"></span></fieldset>

• 仅当通过切换按钮激活时，如何使字段为必填(非空)?正则表达式在这里不起作用，只有在用户进行一些输入时才起作用.

完整代码在这里:https://github.com/romanicak/growduino-client/tree/master/来源

解决方案

在你的控制器中使用一个变量来跟踪字段是否是必需的:

$scope.isRequired = false;

当您的按钮被点击时，切换该变量

在您的输入中，将需求绑定到该变量:

就是这样.即使您没有在控制器中定义变量，它也会起作用.

工作 JSFiddle

• I have an application where toggle button is, and when clicked, it activates fields for user input.
• Fields are on one page, button is calling like this:

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

• How to make the fields required (non empty) only when they are activated by toggle button? Regex is not working here, it works only if user do some input.

The whole code is here: https://github.com/romanicak/growduino-client/tree/master/src

解决方案

Use a variable in your controller to track whether the fields are required:

$scope.isRequired = false;

When your button is clicked, toggle that variable

<button ng-click="isRequired = !isRequired">

In your inputs, bind the requirement to that variable:

<input type="text" ng-model="myinput" ng-required="isRequired" />

That's it. It will work even if you don't define the variable in the controller.

Working JSFiddle

这篇关于AngularJS - 如何仅对活动字段使用 ng-required的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！