通过 <button> ng-click 更新值时，ng-valid 不会触发隐藏的输入答案

【问题标题】：ng-valid not triggering on input hidden when value is updated via <button> ng-click通过 <button> ng-click 更新值时，ng-valid 不会触发隐藏的输入
【发布时间】：2016-04-09 05:36:11
【问题描述】：

我是 AngularJS 的新手。我有一个简单的表单，如果所有必填字段都是 ng-valid，那么提交按钮就会启用。如果我在 LOAN AMOUNT 框中输入，则 ng-valid 类将添加到此输入中。

但是，在第二个字段上，我使用按钮来使用 ng-click 更新隐藏字段的值。这有效并且值在单击时更新，但是该类保持为 ng-invalid 并且提交按钮被禁用。我猜这与 Angular 不知道这已经更新有关，但我无法找到解决方案。如果有任何帮助，我将不胜感激。

<body ng-app="validationApp" ng-controller="mainController">
<form name="userForm" id="appform" ng-submit="submitForm(userForm.$valid)" action="results.php" method="post" novalidate validate-non-visible-controls> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<div class="container" style="max-width:1000px;">
    <div class="row">
        <div class="col-md-4">
            <!-- LOAN AMOUNT -->
                <div class="form-group" ng-class="{ 'has-error' : userForm.amount.$invalid && !userForm.amount.$pristine }">
                    <label>How much do you need? <span class="red">*</span></label>
                    <input type="number"  name="amount" id="amount" class="form-control searchfield" ng-model="user.amount" ng-maxlength="6" required>
                    <p ng-show="userForm.amount.$invalid && !userForm.amount.$pristine" class="help-block">Loan amount is required.</p>
                    <p ng-show="userForm.amount.$error.maxlength" class="help-block">Loan amount too high.</p>
                </div>
        </div>
        <div class="col-md-8">
            <!-- BUSINESS TYPE -->
            <div class="form-group" ng-class="{ 'has-error' : userForm.type.$invalid && !userForm.type.$pristine }">
                <label>What type of business do you own? <span class="red">*</span></label>
                <input type="hidden" name="type" ng-model="data.type" value="{{selected}}" required/>
                <button type="button" class="ltd opt" ng-click="selected = 1;userForm.type.$valid" ng-class="{active: selected == 1}">Limited Company</button>
                <button type="button" class="st opt" ng-click="selected = 2" ng-class="{active: selected == 2}">Sole Trader</button>
                <button type="button"class="ps opt" ng-click="selected = 3" ng-class="{active: selected == 3}">Partnership</button>
                <button type="button"class="llp opt" ng-click="selected = 4" ng-class="{active: selected == 4}" >LLP</button>
                <p ng-show="userForm.type.$invalid && !userForm.type.$pristine" class="help-block">Business type is required.</p>
            </div>
        </div>
    </div><button type="submit" class="bluebtn biggerBtn" ng-disabled="userForm.$invalid">FINANCE MY BUSINESS <i class="fa fa-caret-right"></i></button>
</body>

【问题讨论】：

标签： javascript angularjs validation

【解决方案1】：

您必须将 ng-model 更改为：

<input type="hidden" name="type" ng-model="selected" value="{{selected}}" required/>

【讨论】：