數據綁定之前的Angular JS ng-form電子郵件驗證

Question

我有一個Angular JS表單，如下所示：

<div ng-controller="EmpController as empVm"
 name="formEmployee" ng-form >
       <div>
            <div class="col-sm-5">
                Email
            </div>
            <div class="col-sm-7">
                <input type="email" validate-length ng-maxlength="2000"
                       ng-model="empVm.profileData.email" name="email"
                       ng-pattern="^[_a-zA-Z0-9]+(\.[_a-zA-Z0-9]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,4})$"/>
                <div ng-show="(formEmployee.email.$dirty || formEmployee.email.$touched) && formEmployee.email.$invalid">
                    <span ng-show="!formEmployee.email.$error.pattern">Invalid Email</span>
                </div>
            </div>
        </div>
</div>

即使電子郵件字段中包含有效的電子郵件，該表單也始終無效。 一旦我與電子郵件文本框進行交互（例如更改電子郵件文本框中的某些文本），該表單將再次變得有效。

我要達到的目的是，一旦從服務調用中綁定了值，表單就應該驗證電子郵件文本框的數據，並且頁面加載后表單應該有效（如果有效的話），否則表單應該是無效的，並且上面的div其中應顯示無效的電子郵件。

Answer 1

1. 該span指定Invalid Email不會被關閉。
2. ng-pattern的值應該是$scope / vm對象或原始字符串（即，引號之間）。
3. 電子郵件模式似乎不完整。
4. 在您的示例中，我們不知道frmAgentProfile來自何處。
5. 您正在談論服務電話，我們沒有有關此的任何信息。 如果要通過服務調用進行驗證，則應創建一個自定義的異步驗證器。

我在ng-pattern起作用的小提琴中推送了您的代碼。

這里

Answer 2

來自后端服務調用的數據在電子郵件的末尾帶有一個空格字符 ，正則表達式失敗，並且在UI的文本框中看不到該空格，這就是該表單變得無效的原因。