Angularjs 使用 ng-pattern 进行表单验证

Question

我正在使用 ng-pattern 来验证字段并在它与使用 ng-messages 的特定模式不匹配时显示一条消息。我遇到的问题是表单有一个下一个按钮，它是 disabled/enabled with ng-diabled"form.$invalid" 所以当输入无效时，表单就无效了。

我想实现的是当 ng-pattern 不匹配时用 ng-message 显示一条消息，但不将表单设置为无效。本质上，我试图提供一个提示，即用户输入的文本可能无效，同时不阻止提交表单。

Answer 1

据我所知，您正在使用 ng-disabled 这意味着您希望在表单无效时禁用按钮，但对于某些特定情况，您只想显示错误消息而不是使表单无效

如果是这种情况，只需在控制器中为该 ng-model 值添加一个观察器并切换一个变量以显示或隐藏该错误消息

$scope.$watch('email', function() {
  if (email == 'abx@xyz.com') {
    flag = true;
  }
  else {
    flag = false;
  }
})

请注意，这仅适用于特定情况，避免使用观察器，它会降低您的应用程序速度

Answer 2

我想你想要这样。此处，此十进制值模式如果不匹配，将不允许提交数据。

<input class="form-control" type="dacimal" name="percentage" ng-model="percentage" ng-min="0.01" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" required>
<span class="alert-danger" ng-show="studentForm.$submitted || (studentForm.percentage.$dirty && studentForm.percentage.$invalid)">
  <span ng-show="studentForm.percentage.$error.required">Percentage is required !</span>
  <span ng-show="!studentForm.percentage.$valid">Invalid Percentage !</span>
</span>

Angularjs 使用 ng-pattern 进行表单验证

Angularjs Form Validation with ng-pattern

html

validation

angularjs

ng-messages