模糊ngMessages驗證取消鏈接/按鈕點擊

我有一個用戶名字段（必填），登錄按鈕，取消按鈕和忘記密碼鏈接的簡單登錄表單。用戶名字段專注於頁面加載。模糊ngMessages驗證取消鏈接/按鈕點擊

我使用ngMessages來顯示驗證錯誤，在這個簡單的例子中，窗體唯一的驗證規則是用戶名所需的。我不想在頁面加載時顯示驗證錯誤，只有在用戶離開用戶名字段後。要做到這一點，我已經設置了用戶名要求的消息，以便在用戶名元素註冊爲觸摸後才顯示。

我的問題出現在用戶單擊取消按鈕或忘記密碼鏈接時，所需用戶名的驗證消息按預期顯示，但按鈕或鏈接的單擊事件永遠不會被觸發。這當然是提交按鈕的正確行爲，但不適用於頁面上的其他任何（鏈接/按鈕）元素。

它似乎不像ngMessages應該確定是否應取消點擊事件。雖然在這種情況下對於提交按鈕來說這是正確的行爲，但我更願意自己管理它。這是一個錯誤還是我錯誤地實現ngMessages，或其他？

編輯，以充分闡明所提出的問題 爲什麼驗證消息的顯示造成一個不相關的點擊事件被取消，我怎樣才能避免這種情況？

這裏有一個plunker：https://plnkr.co/edit/bLWODaWSXowZ4AcgTze9?p=preview

編輯補充： 在Plunkr，一旦頁面加載，如果用戶點擊忘記密碼鏈接，驗證錯誤消息的用戶名必應出現和忘記密碼點擊事件應該在顯示「進入密碼重置」頁面時觸發顯示消息。除非您再次點擊忘記密碼鏈接，否則此點擊事件不會發生。

下面的代碼：

<form name="buttonFail" novalidate autocomplete="off"> 
    <label for="username">Username</label> 
    <div> 
     <input ng-model="ngUsername" id="username" name="username" type="text" required class="ngMessageSample" autofocus /> 
     <div ng-messages="buttonFail.username.$error" class="ngMessagesClass" ng-show="buttonFail.username.$touched"> 
      <div ng-message="required" class="ngMessageClass">* This field is required</div> 
     </div> 
    </div> 
    <button type="submit" ng-click="//do nothing">Log In</button> 
    <button type="button" ng-click="ngModel.saySomething='Log in cancelled';">Cancel</button> 
    <br /> 
    <a href="#" ng-click="ngModel.saySomething='Go to password reset';">Forgot password?</a> 
    <div>{{ngModel.saySomething}}</div> 
</form>

來源

2017-06-14 RockStacker

https://plnkr.co/edit/hQ5hKQEd9TPQ69asKOO5?p=preview可以請您驗證是否是按預期工作？你不能在角模板中綁定未定義的變量。 – Naruto

@Naruto，我看到你初始化了我正在使用的範圍變量，但是這並沒有改變頁面的行爲。用戶第一次點擊密碼重置或取消按鈕時，點擊未被註冊。我將你的修改添加到我的Plunkr中。 – RockStacker

@RockStacker https://plnkr.co/edit/sDR1KgfoZkd03WvlxL3B?p=preview checkthis – XYZ

這是因爲在你的代碼中已設置autofocus屬性來input.So輸入將集中在負載itself.So當你第一次點擊密碼重置或取消按鈕或任何發生輸入模糊事件的地方。因此驗證報告將顯示。密碼重置或取消按鈕被確認的消息和點擊事件位置的外觀移動之前的單擊事件完成。您可以修復使用ng-mousedown代替ng-click

而且從刪除ng-click="//do nothing"您提交變更按鈕

https://plnkr.co/edit/gNR1yrXA6glXGpn9sH2h?p=preview

來源

2017-06-14 16:17:12 XYZ

刪除自動對焦屬性只會延遲問題。如果用戶加載頁面，單擊用戶名字段，然後嘗試單擊忘記密碼，問題仍然存在。 – RockStacker

@RockStacker $ touch將是真實的，如果用戶點擊inout.You希望消息只在提交按鈕單擊?? – XYZ

我希望驗證在用戶離開現場時顯示。爲簡單起見，這是一個非常簡潔的例子，在現實世界的情況下，表單上可能會有十幾個輸入，每個輸入都有自己的驗證。您的答案與我所問的問題無關，「爲什麼顯示驗證消息會取消其他消息的點擊事件」。 – RockStacker

模糊ngMessages驗證取消鏈接/按鈕點擊

回答

相關問題