AngularJS - как использовать ng-required только для активных полей - PullRequest
Новая
       30

AngularJS - как использовать ng-required только для активных полей

0 голосов
/ 05 октября 2018
  • У меня есть приложение, в котором находится кнопка переключения, и при нажатии она активирует поля для ввода данных пользователем.
  • Поля находятся на одной странице, кнопка вызывается так: 

<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

1 Ответ

0 голосов
/ 05 октября 2018

Используйте переменную в вашем контроллере, чтобы отследить, являются ли поля обязательными: 

$scope.isRequired = false;

Когда нажата ваша кнопка, переключите эту переменную 

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

.требование к этой переменной: 

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

Вот и все.Это будет работать, даже если вы не определите переменную в контроллере.

Рабочая JSFiddle

...