javascript - 我如何覆盖 Angular 对无效表单值的过滤，强制 Angular 将 $viewValue 保留为 $modelValue？

Question

我需要能够暂时保留尚未完全验证的数据，然后在我准备好使其永久化时强制执行验证。但是 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 而不管有效性。但是当应该有更优雅的路径时，这会破坏框架。

See CodePen here .

(旁注:Angular 似乎根据验证器在两个方向 过滤数据。如果您在模型上为 formData.zip 设置默认值“1234”，这是没有足够的字符来验证，Angular 甚至不显示它。它永远不会达到初始的 $viewValue。)

Answer 1

从 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