我需要能够暂时保留尚未完全验证的数据,然后在我准备好使其永久化时强制执行验证。但是 Angular 正在阻止这种情况。
我有一个表格。用户可以在表单的早期版本上saveDraft()
,这些表单会持久保存到服务器。然后,当用户准备就绪时,他们可以submit()
表单,该表单将使用不同的标志持久化,从而开始对该数据的实际处理。
我遇到的问题是 Angular 的内置验证。当用户将一些数据输入带有验证的输入时,该数据将缓存在 $viewValue
属性中。但如果验证失败,它永远不会复制到 $modelValue
属性,这是对我将输入绑定(bind)到的实际 $scope
属性的引用。因此不会保留“无效”值。
但我们需要坚持下去。我们将处理强制用户稍后在他们提交()时纠正他们的验证失败。此外,我们无法知道用户是否要在 View / Controller 的特定实例上执行 saveDraft()
或 submit()
,因此我们不能预先以不同方式设置 View 和验证。
我的想法是,我们需要以某种方式迭代表单元素并让 Angular 以某种方式让数据通过。但我找不到一种灵活且可扩展的方法。
我试过设置 $scope.formName.inputName.$modelValue = $scope.formName.inputName.$viewValue
,但这似乎让上帝感到不安,因为这两个值都为空'编辑。
我试过使用 $scope.formName.inputName.$setValidity('', true)
,但这只会更新 UI 状态。它从不触及 $modelValue
。
我可以成功地使用 $scope.model.boundPropertyName = $scope.formName.inputName.$viewValue
但这感觉非常必要并且不允许 boundPropertyName 的标识符之间有任何差异
和 inputName
。换句话说,您要么需要所有表单控件的单独函数,要么需要依赖命名约定。两者都非常脆。
那么...我怎样才能让 $modelValue
优雅地更新呢?和/或者,是否有另一种更好的方法来获得相同的结果,有时我可以坚持验证,有时坚持不验证?
我正在考虑但不满意的其他选项:
- 仅在用户点击 submit() 时手动运行验证。但这破坏了 UI 中即时、内联验证的 UX 值(value)。我们不妨将所有验证卸载到服务器并每次都进行一次往返。
- 制作 ngModel 和 ngModelController 的副本,并对它们进行猴子修补以更新
$modelValue
而不管有效性。但是当应该有更优雅的路径时,这会破坏框架。
(旁注:Angular 似乎根据验证器在两个方向 过滤数据。如果您在模型上为 formData.zip 设置默认值“1234”,这是没有足够的字符来验证,Angular 甚至不显示它。它永远不会达到初始的 $viewValue
。)
最佳答案
从 Angular 1.3 版本开始可以使用以下解决方案:
您可以在要保留无效属性的模型的输入字段中设置 ng-model-options="{ allowInvalid: true }"
。
allowInvalid: boolean value which indicates that the model can be set with values that did not validate correctly instead of the default behavior of setting the model to undefined
https://docs.angularjs.org/api/ng/directive/ngModelOptions
然后,当您准备好向用户显示他们的验证错误时,您可以按照自己的方式自由操作。请记住为您的输入和表单提供 name
属性,以便您可以在您的范围内引用它们。
例如if($scope.myFormName.my_input_name.$invalid) { ... }
相关教程:http://blog.thoughtram.io/angularjs/2014/10/19/exploring-angular-1.3-ng-model-options.html
关于javascript - 我如何覆盖 Angular 对无效表单值的过滤,强制 Angular 将 $viewValue 保留为 $modelValue?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21345987/