验证AngularJS的错误消息未显示在ONSEN-UI的Ons-Dialog页面中

I am developing a Cordova Application using Onsen-UI. In one Page, I am showing one Dialog Box using ons-dialog which contains form elements. I have implemented validation using AngularJS directive ng-show.

我正在使用Onsen-UI开发Cordova应用程序。在一个页面中,我使用包含表单元素的ons-dialog显示一个对话框。我已经使用AngularJS指令ng-show实现了验证。

Here after clicking the submit button, the Error messages are not showing in the dialog page, but validation is happening. Other pages of the application are showing all the error messages perfectly,but ons-dialog is not showing that error messages.

单击提交按钮后,对话框页面中不显示错误消息,但验证正在进行。该应用程序的其他页面完美地显示所有错误消息,但ons-dialog未显示该错误消息。

My Code:

<ons-template id="info.html">
<ons-dialog var="myDialog" animation="fade" cancelable>

    <ons-toolbar inline fixed-style>
        <div class="center">
            Info
        </div>
    </ons-toolbar>
    <form name="myForm" ng-submit="submitted=true; myForm.$valid && myDialog.hide();" novalidate>

        <div style="text-align:center;margin:0px 10px 0px 10px">

            <input name="rFName" ng-model="rFName" class="text-input" style="width:100%;margin-top:10px" id="" placeholder="First Name" required>
            <div style="color:red;font-size:13px;text-align:center">
                <span ng-show="submitted && myForm.rFName.$error.required">*required</span>

            </div>

            <input name="rLName" ng-model="rLName" class="text-input" style="width:100%;margin-top:10px" id="" placeholder="Last Name" required>
            <div style="color:red;font-size:13px;text-align:center">
                <span ng-show="submitted && myForm.rLName.$error.required">*required</span>

            </div>

            <input type="email" name="rEmail" ng-model="rEmail" class="text-input" style="width:100%;margin-top:10px" id="" placeholder="Email" required>
            <div style="color:red;font-size:13px;text-align:center">
                <span ng-show="submitted && myForm.rEmail.$error.required">*required</span>
                <span ng-show="submitted && myForm.rEmail.$error.email">*Invalid email</span>
            </div>

            <input type="number" name="rPhone" ng-model="rPhone" class="text-input" style="width:100%;margin-top:10px" id="" placeholder="Contact Number" required>
            <div style="color:red;font-size:13px;text-align:center">
                <span ng-show="submitted && myForm.rPhone.$error.required">*required</span>
                <span ng-show="submitted && myForm.rPhone.$error.number">*Please enter valid phone number</span>
            </div>

        </div>


        <p></p>


        <div style="text-align:center" ng-controller="myCtrl">
            <ons-button style="width:35%;background:#B54747" ng-click="submitted=true; myForm.$valid && myDialog.hide();">Save</ons-button>
            <ons-button id="cancel_btn" style="width:35%;background:#B54747" ng-click="myDialog.hide();">Cancel</ons-button>
        </div>

    </form>
    <p>

    </p>




</ons-dialog>
</ons-template>

1 个解决方案

#1

Just place ng-controller on form elements or form element's parent not just div tag which contains save and cancel button because form fields and form button are two different scope.

只需将ng-controller放在表单元素或表单元素的父元素上,而不仅仅是包含保存和取消按钮的div标签,因为表单字段和表单按钮是两个不同的范围。

<form name="myForm" ng-controller="myCtrl" ng-submit="submitted=true; myForm.$valid && myDialog.hide();" novalidate>

    <div style="text-align:center;margin:0px 10px 0px 10px">

        <input name="rFName" ng-model="rFName" class="text-input" style="width:100%;margin-top:10px" id="rFName" placeholder="First Name" required>
        <div style="color:red;font-size:13px;text-align:center">
            <span ng-show="submitted && myForm.rFName.$error.required">*required</span>

        </div>

        <input name="rLName" ng-model="rLName" class="text-input" style="width:100%;margin-top:10px" id="" placeholder="Last Name" required>
        <div style="color:red;font-size:13px;text-align:center">
            <span ng-show="submitted && myForm.rLName.$error.required">*required</span>

        </div>

        <input type="email" name="rEmail" ng-model="rEmail" class="text-input" style="width:100%;margin-top:10px" id="" placeholder="Email" required>
        <div style="color:red;font-size:13px;text-align:center">
            <span ng-show="submitted && myForm.rEmail.$error.required">*required</span>
            <span ng-show="submitted && myForm.rEmail.$error.email">*Invalid email</span>
        </div>

        <input type="number" name="rPhone" ng-model="rPhone" class="text-input" style="width:100%;margin-top:10px" id="" placeholder="Contact Number" required>
        <div style="color:red;font-size:13px;text-align:center">
            <span ng-show="submitted && myForm.rPhone.$error.required">*required</span>
            <span ng-show="submitted && myForm.rPhone.$error.number">*Please enter valid phone number</span>
        </div>

    </div>


    <p></p>


    <div style="text-align:center" >
        <ons-button style="width:35%;background:#B54747" ng-click="submitted=true; myForm.$valid && myDialog.hide();">Save</ons-button>
        <ons-button id="cancel_btn" style="width:35%;background:#B54747" ng-click="myDialog.hide();">Cancel</ons-button>
    </div>

</form>

Demo link