"是/否"单选按钮的问题(如果选择了"yes"，则需要阻止提交)

Question

如果问题的答案是/否，或者至少正确地给出错误消息，我在试图找到阻止表单提交的最佳操作方案时遇到了一些问题。

第一次尝试只是在"否"按钮上添加required="true"：

<th valign="top" align="left">
    <label for="yesOrNo">
        <strong>Are you a bad guy?</strong>
        <br />
        <br />
    </label>
</th>
<td valign="top">
    <label>
        <input type="radio" name="yesOrNo" id="yesOrNo" value="yes" />Yes</label>
    <br />
    <label>
        <input type="radio" name="yesOrNo" id="yesOrNo" required="true" value="no" />No</label>
    <br />
    <br />
</td>
</tr>

然后，在"是"仍然有效的情况下，我尝试通过angular创建一个隐藏字段，这在过去对我有效。假设这对文本字段和数字有效，我估计了在"是"-"否"单选按钮的情况下应该使用什么：

<th valign="top" align="left">
    <div ng-if="angularYesOrNo=true">You are uneligible for this promotion</div>
    <label for="yesOrNo"><strong>Are you a bad guy?</strong>
        <br />
        <br />
    </label>
</th>
<td valign="top">
    <label>
        <input type="radio" name="yesOrNo" ng-model="angularYesOrNo" id="yesOrNo" value="yes" />Yes</label>
    <br />
    <label>
        <input type="radio" name="yesOrNo" id="yesOrNo" value="no" />No</label>
    <input type="hidden" name="badGuyFlag" id="badGuyFlag" ng-required='angularYesOrNo=true' />
    <br />
    <br />
</td>
</tr>

这两个代码中有什么需要我更改的地方吗？或者我需要在一个单独的脚本标记中添加任何函数吗？这件事整个下午都在折磨我。

Answer 1

工作Plunker

看起来您需要在Angular Javascript文件中定义变量，如下所示：

Javascript

$scope.angularYesOrNo = {bad:undefined};

ng-if语句需要两个等号来评估angularYesOrNo变量。

Html

<div valign="top" align="left">
  <div ng-if="angularYesOrNo.bad=='Yes' ">You are uneligible for this promotion</div>
  <label for="yesOrNo"><strong>Are you a bad guy?</strong>
    <br />
    <br />
  </label>
</div>
<div valign="top">
  <label>
      <input type="radio" name="yesOrNo" ng-model="angularYesOrNo.bad" id="yesOrNo"  value="Yes" />
      Yes
  </label>
  <br />
  <label>
    <input type="radio" name="yesOrNo" ng-model="angularYesOrNo.bad" id="yesOrNo"  value="No" />
    No
  </label>
  <br />
  <br />
</div>

Answer 2

您可以在表单上使用ng-submit来设置提交处理程序，该处理程序在提交表单数据之前验证表单数据。

<form name="myForm" novalidate ng-submit="processSubmit()">
    <label><input type="radio" name="yesOrNo" ng-model="angularYesOrNo" id="yesOrNo"  value="yes" /> Yes</label><br />
    <label><input type="radio" name="yesOrNo" ng-model="angularYesOrNo" id="yesOrNo"  value="no" /> No</label><br />

在控制器中定义函数。

$scope.angularYesOrNo = '';
$scope.processSubmit = function() {
    if ($scope.angularYesOrNo == '' || $scope.angularYesOrNo == 'Yes') {
        // the form should not be submitted
    } else {
        // process the form (submit or ajax)
    }
};

如果您想从控制器触发表单提交，请参阅https://stackoverflow.com/a/25102791/5509627