Question

我有一个Angular表单，其中包含两个元素，如下所示：

邮政编码：

<label class="item item-input" ng-class="{ 'has-error' : registrationForm.postcode.$invalid && (registrationForm.postcode.$dirty || submitted)}">
    <span class="input-label">Postcode<span class="required">*</span></span>
    <input ng-change="test()" name="postcode" type="text" ng-model="registration.postcode" required ng-pattern="postcode_regex" autocomplete='postal-code'>
</label>
<p ng-show="profileForm.postcode.$invalid && (profileForm.postcode.$dirty || submitted)" class="assertive">A valid postcode is required.</p>

电话：

<label class="item item-input" ng-class="{ 'has-error' : registrationForm.telephone.$invalid && (registrationForm.telephone.$dirty || submitted)}">
    <span class="input-label">Telephone<span class="required">*</span></span>
    <input ng-change="test()" name="telephone" type="tel" ng-model="registration.telephone" required ng-pattern="phone_number_regex" autocomplete='tel'>
</label>
<p ng-show="registrationForm.telephone.$invalid && (registrationForm.telephone.$dirty || submitted)" class="assertive">A valid telephone is required (numbers only please).</p>

相关的控制器代码如下：

$scope.phone_number_regex = /^[0-9 ]{10,}$/;
//https://en.wikipedia.org/wiki/Postcodes_in_the_United_Kingdom#Validation
// (Note: I tested this on regex101.com and it works fine).
$scope.postcode_regex = /^([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z]))))\s?[0-9][A-Za-z]{2})$/; 

$scope.submit = function (isValid) {
    $scope.submitted = true;
    if (isValid) {

等

当用户填写电话字段时，一旦他们开始键入直到与$scope.phone_number_regex匹配，就会显示确认消息（即“需要有效的电话等”）。但是，在邮政编码字段上，不会显示任何验证消息（即“需要有效的邮政编码。”），但是只有在与$scope.postcode_regex匹配时，表单才会提交。

为什么我看不到邮政编码的验证消息？

Answer 1

表单名称存在冲突。希望您使用的是registrationForm，而不是这里的profileForm。

将profileForm.postcode.$invalid更改为registrationForm.postcode.$invalid，将profileForm.postcode.$dirty更改为registrationForm.postcode.$dirty

<p ng-show="registrationForm.postcode.$invalid && (registrationForm.postcode.$dirty || submitted)" class="assertive">A valid postcode is required.</p>

希望这对您有帮助！

Angular自定义表单验证消息未显示在1个特定字段上

1 个答案: