Question

您有一个使用json数据的表单，我的表单也应该在提交时验证。不确定为什么只在选中一个时选择单选按钮。不确定表单的js是否工作。任何帮助非常感谢。

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="element1"></div>
<div id="element2"></div>

<div id="drop">Drop here</div>
<button type="button" id="Reset" name="button">Reset</button>

JS：

<my-form ng-app="CreateApp" ng-controller="mainController">

      <form ng-submit="userForm()" name="userForm" novalidate>
          <fieldset>
            <div ng-repeat="field in result.fields">
              <label for="{{field.type}}">{{field.label}}</label>

              <input ng-if="field.type != 'radio'"
                     name="{{field.name}}"
                     ng-required="{{field.required}}"
                     value="{{options.value}}" 
                     type="{{field.type}}" />

              <div ng-if="field.type == 'radio'">
                <div ng-repeat="option in field.options">

                  <input type="{{field.type}}"
                         name="{{field.name}}"
                         ng-required="{{field.required}}"
                         ng-model="richestClub"
                         value="{{option.value}}" />{{option.label}}
                </div>
              </div>

              <form-error ng-show="{{!!field.errorMessages.required}}">{{field.errorMessages.required}}</form-error>
              <form-error ng-show="{{!!field.errorMessages.invalid}}">{{field.errorMessages.invalid}}</form-error>
            </div>
          </fieldset>

         <button type="submit"
                 ng-disabled="userForm.$invalid"
                 ng-click="onSubmit(userForm)"> Submit </button>
        </form>

    </my-form>

Plunker

Answer 1

按钮不互斥的原因是因为它们必须共享相同的名称，但JSON文档没有定义无线电组的名称。尝试提供如下所示的名称（“名称”：“测试”）。

{
    "fields": {
        "name": {
            "type": "text",
            "required": true,
            "label": "Name",
            "errorMessages": {
                "required": "You need to tell us your name!"
            }
        },
        "email": {
            "type": "email",
            "required": true,
            "label": "email",
            "errorMessages": {
                "required": "You need to tell us your name!",
                "invalid": "There's a typo in your email"
            }
        },
        "comment": {
            "type": "text",
            "required": false,
            "label": "Comment",
            "errorMessages": {
            }
        },
        "answer": {
            "type": "radio",
            "name": "test",
            "required": true,
            "label": "What's the richest club?",
            "options": [
                {
                    "label": "A: Chelsea",
                    "value": "Chelsea"
                },
                {
                    "label": "B: Man City",
                    "value": "Man City"
                },
                {
                    "label": "C: Real Madrid",
                    "value": "Real Madrid"
                },
                {
                    "label": "D: Fiorentina",
                    "value": "Fiorentina"
                }
            ],
            "errorMessages": {
                "required": "Please answer the question"
            }
        }
    }
}

单击时应验证AngularJS单选按钮

1 个答案: