AngularJS输入表单验证没有'当它's模型的更改

AngularJS input form validation doesn't fire when it's model changes

本文关键字：模型 当它 输入 表单 AngularJS 验证      更新时间：2023-09-26

我正在尝试获取一些表单输入，以验证它们的模型是否/何时更新。目前，删除原始类的唯一方法是手动在输入框中键入。

Fiddle：http://jsfiddle.net/TgR7A/在小提琴中，如果你点击"切换"，2个输入（其中一个总是隐藏的）通过它们的模型填充内容，但表单输入保持原始。我知道这是AngularJS处理表单输入的方式，但我希望有一个变通方法（a.K.a hack！），允许验证输入。

HTML:

<div ng-app>
<div ng-controller="toggleCtrl">
     <h1>{{ title }}</h1>
    <form novalidate class="css-form" name="swtichForm">
        <label>Input</label>
        <input type="text" name="one" class="one" ng-show="input_show=='one'" ng-model="one" required />
        <input type="text" name="two" class="two" ng-show="input_show=='two'" ng-model="two" required />
        <p ng-click="toggle()">Toggle</p>
    </form>
</div>

CSS：

.one {
border-color: blue;
}
.two {
    border-color: yellow;
}
.css-form input.ng-invalid {
    background-color: #FA787E;
}
.css-form input.ng-valid {
    background-color: #78FA89;
}
.css-form input.ng-pristine {
    background: #fff;
}

JS:

function toggleCtrl($scope) {
    $scope.title = "Input toggle";
    $scope.input_show = "one";
    $scope.toggle = function () {
        $scope.one = 'hello';
        $scope.two = 'world';
        $scope.input_show = ($scope.input_show == 'one' ? 'two' : 'one');
    }
}

您可以在这里找到关于Stack Overflow的很好的解释。

不幸的是，尽管有$setPristine()函数，但没有$setDirty()函数。正如stevuu所建议的，解决问题最不难看的方法是用新值调用$setViewValue()，然后强制视图用$render():更新

$scope.toggle = function () {        
    $scope.switchForm.one.$setViewValue('hello');
    $scope.switchForm.two.$setViewValue('world');
    $scope.switchForm.one.$render();
    $scope.switchForm.two.$render();
    $scope.input_show = ($scope.input_show == 'one' ? 'two' : 'one');
}

Fiddle

相关文章：