javascript - 带有表单验证的 ng-show formname.inputname.$error 失败

Question

我正在学习 angularjs 并使用 ng-show 进行表单验证，但它不起作用。我将 form's name.input's name.$error && !form's name.input's name.$pristine 应用到我的错误消息范围，但它失败了并且没有错误消息输出。我还尝试查看 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

您应该为其添加必需的。

更改:

<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>

适用于所有输入。