返回
我在AngularJ中的形式验证遇到麻烦。我试图根据输入是否无效来显示DIV。Angular将正确的类放在我的输入（NG触摸和NG-Invalid）上，但仍在与NG-HIDE类别保持DIV。
form.html
<form id="" name="contactForm"
ng-submit="postForm()" novalidate>
<div class="form-group row">
<label for="full-name" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Name</label>
<div class="col-lg-10 col-md-9 col-xs-8">
<input class="form-control" type="text" placeholder="Jon Doe"
id="full-name" required data-ng-model="formData.name">
</div>
</div>
<!-- This is the only input implemented with the errors -->
<div class="form-group row">
<label for="phone-number" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Phone
Number</label>
<div class="col-lg-10 col-md-9 col-xs-8">
<input class="form-control" type="tel"
placeholder="(630) 555-6723" id="phone-number" required
data-ng-model="formData.phone" name="phone" ng-minlength="10"/>
</div>
<div ng-show="(contactForm.phone.$invalid && contactForm.phone.$touched) || contactForm.phone.$error.minlength">Please enter a valid phone
number.</div>
</div>
<div class="form-group row">
<label for="email" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Email</label>
<div class="col-lg-10 col-md-9 col-xs-8">
<input class="form-control" type="email"
placeholder="jon.doe@gmail.com" id="email" required
data-ng-model="formData.email" />
<div class="invalid-feedback">Please enter a valid email.</div>
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label">Contact Method</label>
<div class="col-lg-2 col-md-3 col-xs-4">
<label class="custom-control custom-radio"> <input
id="radio1" name="email" type="radio"
class="custom-control-input" checked="checked"
data-ng-model="formData.pref"> <span
class="custom-control-indicator"></span> <span
class="custom-control-description">Email</span>
</label> <label class="custom-control custom-radio"> <input
id="radio2" name="phone" type="radio"
class="custom-control-input" data-ng-model="formData.pref">
<span class="custom-control-indicator"></span> <span
class="custom-control-description">Phone</span>
</label>
</div>
</div>
<div class="form-group row">
<label for="full-name" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Body</label>
<div class="col-lg-10 col-md-9 col-xs-8">
<textarea rows="15" class="form-control"
placeholder="Type your message here..." id="body-text" required
data-ng-model="formData.body"></textarea>
<div class="invalid-feedback">Please enter a message here.</div>
</div>
</div>
<div class="text-center">
<button ng-disabled="contactForm.$invalid" class="btn-primary btn" type="submit">Submit</button>
</div>
</form>
</div>
angular.js
<!-- SCRIPTS -->
<script>
//form validate
var app = angular.module('contactUs', []);
app.controller('formCtrl', function($scope, $http) {
$scope.formData = {};
$scope.postForm = function() {
$('#loadingScreen').modal('show');
$http({
url : '/api/v1/contact',
method : 'POST',
data : $.param($scope.formData),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.then(function onSuccess() {
console.log("success");
window.scrollTo(0,0);
$('#success-message').show();
}, function onError(){
console.log("error");
window.scrollTo(0,0);
$('#error-message').show();
})
.then(function() {
$('#loadingScreen').modal('hide');
})
}
$scope.formData = {};
});
</script>
查看其他错误，我确保ng-show使用formname.inputname，并且应用程序和控制器正常工作。当表单无效时，该按钮被正确禁用，这使我相信控制器和应用不是问题。
我尝试使用将表格的手机部分更改为
的ng-messages<div class="form-group row">
<label for="phone-number" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Phone
Number</label>
<div class="col-lg-10 col-md-9 col-xs-8">
<input class="form-control" type="tel"
placeholder="(630) 555-6723" id="phone-number" required
data-ng-model="formData.phone" name="phone" ng-minlength="10"/>
</div>
<div ng-messages="contactForm.phone.$error" class="error" ng-if="contactForm.phone.$dirty">
<div ng-message="required">Please enter a phone number we can reach you at.</div>
<div ng-message="pattern">Please enter a valid phone number here.</div>
<div ng-message="minlength">Please enter a phone number that's atleast 10 digits</div>
</div>
</div>
Angular仍将正确的类添加到输入中，但仍未显示。我相信NG-如果正在评估错误。奇怪的是，当我运行
时{{contactForm.phone.$dirty}}
在控制台中，它会以未定义的
在这里看看，您可以看到我如何工作。我将分解下面的步骤。https://plnkr.co/edit/ljybobzss6ptlvkxvp?p=preview
随着使用ng-messages的更改，您需要在应用中包含该模块。我不确定您是否已经进行了更改，但这很简单。包括库的脚本，然后更新模块以将ngmessages作为依赖项包含。
var app = angular.module('contactUs', ['ngMessages']);
第二部分正在修复错字。在您的html接触方法区域中，您有
<label class="custom-control custom-radio">
<input id="radio2" name="phone" type="radio" class="custom-control-input" data-ng-model="formData.pref">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Phone</span>
</label>
您正在重复使用"电话"的名称，这将引起问题，因为您将拥有两个不同的表单项目，具有相同的名称。可能会将这些输入更改为电子邮件preference和PhonePreference或其他需要清楚的内容。
我清理干净后，它就开始工作了。所以我想你在那儿，只是这个错别字让你了。