Question

我正在学习angularjs并使用ng-show进行表单验证，但它不起作用。我申请了表格的名称。输入名称。$ error＆amp;＆amp; ！form的name.input的名称。$ pristine到我的错误消息span但它刚刚失败并且没有输出错误消息。我也试图看到user_form.username。$ pristine的值，没有任何反应。控制台上没有显示错误消息。能帮我找到原因吗？

            <form id="user_form" name="user_form" ng-submit="register()" novalidate>
                <table>
                    <tr>
                        <td class="area">
                            <div class="area">
                                <select>
                                    <option value="">Area</option>
                                    <option value="Australia">+61</option>
                                </select>
                            </div>
                        </td>
                        <td>
                            <div class="mobile">
                                <span><input name="mobileNum" id="mobileNum" type="text" placeholder="Your Mobile Number" class="mobile" ng-model="user.mobile" ></span>
                            </div>
                            <span  ng-show="user_form.mobileNum.$error.required && !user_form.mobileNum.$pristine">Mobile number is required</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span class="name"><input type="name" name="username" placeholder="Your Name" class="name" ng-model="user.name"></span>
                            <span  ng-show="user_form.username.$error.required && !user_form.username.$pristine">Mobile number is required</span>
                            {{user_form.username.$pristine}}
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><span class="passward"><input type="password" placeholder="Passward" class="pw" ng-model="user.password"></span></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="terms">
                            <form action="#" method="post">
                                <input type="checkbox" name="agree"  value="1" class="terms" id="check-box">
                                <label for="check-box"><a target="new" href="pdf/Terms_and_conditions_16may2016.pdf">Terms And Conditions</a></label>
                            </form>
                        </td>
                    </tr>
                    <tr class="create">
                        <td colspan="2"><span><input type="submit" value="Create A New Account" class="create" ng-disabled="user_form.$invalid"></span></td>
                    </tr>
                </table>
            </form>

Answer 1

您应该为其添加required。

变化：

<input name="mobileNum" id="mobileNum" type="text" placeholder="Your Mobile Number" class="mobile" ng-model="user.mobile" >

要：

<input name="mobileNum" id="mobileNum" type="text" placeholder="Your Mobile Number" class="mobile" ng-model="user.mobile" required>

申请所有输入。

Answer 2

您需要在输入中指定要执行的验证类型。
在你的情况下只是<input required name="mobileNum" id="mobileNum" type="text" placeholder="Your Mobile Number" class="mobile" ng-model="user.mobile" >。因此，请指定您的输入是必需的

<input type="checkbox" name="q3resp4" value="1" onchange="valueChanged()"/> Other entity (specify):<br>
    <div style="display: none;" id="q3othertxt">
        <textarea rows="4" cols="50" id="q7resp"></textarea>
    </div>

Check this plunker

Angular表单验证文档：https://docs.angularjs.org/guide/forms

ng-show表单验证formname.inputname。$ error失败

2 个答案: