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