單選按鈕驗證不起作用Angular JS

Question

我最近開始在AngularJS工作。 我試圖驗證單選按鈕： -

  <input type="radio" ng-model="CustGender" name="uCustGender" value="Male" required /> Male <input type="radio" ng-model="CustGender" name="uCustGender" value="Female" required /> Female <span class="error" ng-show="(f1.uCustGender.$dirty || submitted) && f1.uCustGender.$error.required">Gender required!</span> <input id="Submit1" type="submit" value="Submit" class="btn btn-success" /> 

但它沒有在Button Click上驗證。 我正在尋找解決方案並遇到一些鏈接，如使用Angular來驗證單選按鈕選項，但它們似乎有不同的方法。 請幫忙。

Answer 1

您需要使用f1.$submitted而不是僅僅在您的范圍內submitted ng-show ，假設'f1'是表單名稱。

<form name="f1" novalidate ng-submit="submit()">
  <input type="radio" ng-model="CustGender" name="uCustGender" value="Male" required /> Male
  <input type="radio" ng-model="CustGender" name="uCustGender" value="Female" required /> Female
  <span class="error" ng-show="(f1.uCustGender.$dirty || f1.$submitted) && f1.uCustGender.$error.required">Gender required!</span>

  <input id="Submit1" type="submit" value="Submit" class="btn btn-success" />
</form>

Answer 2

我希望你把它們包含在表單標簽中，並在表單中提到novalidate屬性，如下所示：

 <form name="f1" ng-submit="submitTeamMember($event)"  novalidate class="form-horizontal"  enctype="multipart/form-data" method="post"  ng-controller="userFormModalCtrl">
 <input type="radio" ng-model="CustGender" name="uCustGender" value="Male" required /> Male
                            <input type="radio" ng-model="CustGender" name="uCustGender" value="Female" required /> Female
                            <span class="error" ng-show="(f1.uCustGender.$dirty || submitted) && f1.uCustGender.$error.required">Gender required!</span>

 <input id="Submit1" type="submit" value="Submit" class="btn btn-success" />
</form>