根据其他值填写必填字段（如果国家/地区为美国，则需要填写状态）

Question

当且仅当国家值等于美国或加拿大时，我希望在 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>

Answer 1

如果你给包装表单元素的 name 属性赋值，AngularJS 应该会自动在 $scope 上按该名称放置一个对象。例如，如果您有以下情况：

<form name="participantForm">
    <input name="state" />
</form>

$scope.participantForm 将是一个 Angular 提供的对象，允许您访问页面上有关表单的信息。除此之外，如果表单输入元素上有 name 属性，也会有一个 Angular 提供的对象，它是表单的属性：$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 的自定义验证器，但这是我倾向于手动处理依赖验证的方式。