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将是一个角度提供的对象，允许您访问有关页面上的表单的信息。除此之外，如果表单输入元素上有name属性，则还会有一个角度提供的对象，该对象是以下形式的属性：$ scope.participantForm [＆＃34; state＆＃34;] 实际上，您现在在视图逻辑中使用它。

你应该删除＆＃34; required＆＃34;在州/省的选择输入元素上的属性，以便它始终停止需要输入。

相反，您应该有一个函数，只要状态/省输入的值发生更改就会触发，检查国家/地区字段的值，然后适当地手动设置州/省字段的有效性。该功能可能如下所示：

$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的自定义验证器，但这就是我倾向于手动接近相关验证的方法。

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

1 个答案: