根据另一个值使字段为必填字段（如果国家是美国，则为必填状态）

Question

我想有一个简单的表单验证在国家下拉，当且仅当国家值等于美国或加拿大。

我的确认工作到目前为止，但它不依赖于美国或加拿大的选择。基本上，现在它将迫使你选择一个州，即使你选择的国家不是美国或加拿大。

<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”]您现在实际上在视图逻辑中使用它。

您应该删除州/省的select input元素上的“required”属性，以便它不再总是需要输入。

$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
}