我想在 STATES 下拉列表中进行简单的表单验证,当且仅当国家/地区值等于美国或加拿大时。
到目前为止,我的验证有效,但它不依赖于美国或加拿大的选择。基本上现在,即使您选择美国或加拿大以外的国家/地区,它也会强制您选择一个州。
<div class="row">
<div class="form-group" ng-class="{ 'has-error' : participantForm.country.$invalid && (!participantForm.country.$pristine || isSubmitted) }">
<div class="col-sm-6 key">Country<span class="req">*</span>:</div>
<div class="col-sm-6 val">
<select ng-model="participant.country" name="country" class="form-control" required ng-options="country.Key as country.Value for country in countries">
<option value="">SELECT</option>
</select>
<p ng-show="participantForm.country.$error.required && (!participantForm.country.$pristine || isSubmitted)" class="help-block">Select a country.</p>
</div>
</div>
<div class="row">
<div class="form-group" ng-class="{ 'has-error' : participantForm.state.$invalid && (!participantForm.state.$pristine || isSubmitted) }">
<div class="col-sm-6 key">US State or Canadian Province:</div>
<div class="col-sm-6 val">
<select ng-model="participant.state" name="state" class="form-control" required ng-options="state.Key as state.Value for state in states">
<option value="">SELECT</option>
</select>
<p ng-show="participantForm.state.$error.required && (!participantForm.state.$pristine || isSubmitted)" class="help-block">Your state is required for USA or Canada.</p>
</div>
</div>
如果你给包装表单元素的name属性一个值,AngularJS 应该自动将一个对象放在$scope上。例如,如果您有以下各项:
<form name="participantForm">
<input name="state" />
</form>
$scope.participantForm 将是一个角度提供的对象,允许您访问页面上有关表单的信息。除此之外,如果表单输入元素上有一个 name 属性,则还会有一个角度提供的对象,它是表单的属性:$scope.participantForm["state"] 您现在实际上在视图逻辑中使用它。
您应该删除州/省的选择输入元素上的"必需"属性,以便它不再总是需要输入。
相反,您应该有一个函数,该函数在州/省输入的值更改时触发,检查国家/地区字段的值,然后相应地手动设置州/省字段的有效性。该函数可能如下所示:
$scope.validateStateField = function() {
var isValid = true;
var country = $scope.participant.country;
if (country === "USA" || country === "Canada") {
var state = $scope.participant.state;
isValid = state != null && state !== '';
}
$scope.participantForm["state"].$setValidity("required", isValid);
}
如果确保此函数在状态字段更改以及用户尝试提交表单时运行,则不仅会适当地更改输入的有效性,而且在继续提交逻辑之前还需要检查正确的值:
if ($scope.participantForm.$valid) {
// Proceed because everything checks out
}
我相信还有一些方法可以创建更原生于 Angular 的自定义验证器,但这就是我倾向于手动处理依赖验证的方式。