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

Question

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

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

我的代码：

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

Answer 1

只是地方上的表单元素或形式元素的父不仅包含保存和取消按钮，因为表单字段和表单按钮是两个不同的范畴div标签NG-控制器。

<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