Plunkr

Question

我尝试提交表单到另一个模拟的API端点，该端点返回true或false，具体取决于提供的答案是否正确。我是AngularJS的新手，我试图一点一滴地获取它。

如何从我的json文件中正确显示所需的消息？
如何显示答案选项并验证它们？

HTML ：

<p>7&nbsp;<span class="frac"><sup>42</sup><span>&frasl;</span><sub>73</sub></span>.</p>

JS：

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

        <form ng-submit="submitForm()" novalidate>
            <fieldset>
                <div ng-repeat="field in result.fields">
                  <label for="{{field.type}}">{{field.label}}</label>
                  <input type="{{field.type}}" ngRequired="{{field.required}}">
                  <span ng-show="{{field.errorMessages}}"></span>
                </div>

                <!-- not sure how to display the answers options and validate them -->
                <input type="{{answer.type}}" name="{{answer.label}}" ngRequired="{{answer.required}}" />


            </fieldset>

            <button type="button" ng-click="onValidate(); return false;"> Validate</button>
            <button type="submit"> Submit </button>
        </form>

    </my-form>

Answer 1

您可以使用ngMessages验证表单。

https://docs.angularjs.org/api/ngMessages/directive/ngMessages

Answer 2

只需对模板进行一些更新即可获得所需的结果。

您需要循环选项并为每个选项打印一个新输入。
您需要为所有控件使用唯一的名称字段，以便可以将它们正确添加到表单中。
ng-show指令需要一个布尔值，因此您可以将消息的存在转换为布尔值，然后在span中显示表达式为true时要显示的文本。

内部ng-repeat用于循环选项并为每个选项创建一个新字段集。如果没有可用的选项，那么我们使用一个只包含允许我们访问其标签和值信息的字段的列表，就像我们对每个选项一样。

查看：

<my-form ng-app="CreateApp" ng-controller="mainController">    
    <form ng-submit="submitForm()">
        <fieldset>
            <div ng-repeat="(key, field) in result.fields">
              <div ng-repeat="option in ((field.type && field.options) || [field])">
              <label for="{{field.type}}">{{option.label}}</label>
              <input type="{{field.type}}" name="{{key}}" ngRequired="{{field.required}} value="{{option.value}}">
              <span ng-show="{{!!field.errorMessages.required}}">{{field.errorMessages.required}}</span>
              <span ng-show="{{!!field.errorMessages.invalid}}">{{field.errorMessages.invalid}}</span>
            </div>
            </div>
        </fieldset>

        <button type="button" ng-click="onValidate(); return;"> Validate</button>
        <button type="submit"> Submit </button>
    </form>     
</my-form>

AngularJS表单验证演示

2 个答案:

查看：

Plunkr