javascript - Angular - 无效模型值的解决方法

Question

我有点引用 https://github.com/angular/angular.js/issues/1412

基本上我有一个输入 ng-maxlength="10" 和 ng-model="form.name"

用户可以在输入框中输入文本，一旦达到限制，就会显示错误并且无法提交表单。这完美无缺。

问题:如果他们单击一个按钮以使用内部数据填充表单，则会引发错误。

例子:

<button ng-click="form.name='12345678901'">Populate Invalid Data</button> 

fiddle - http://jsfiddle.net/kCzjC/1/

Answer 1

在表单元素 ( http://jsfiddle.net/kCzjC/5/ ) 上使用 $setViewValue :

<button ng-click="myForm.formName.$setViewValue('12345678901'); myForm.formName.$render();">Populate Invalid Data</button>

对于大多数 Angular 验证(例如最大长度)，如果发现模型值无效，AngularJS 格式化程序(管道中用于根据模型更新填充 View 值的函数)不会更新 View 值。从 ngModelCtrl 调用 $setViewValue 和 $render 函数将填充输入框。 ngModelCtrl 可通过 ngForm.inputName 访问，其中 ngForm 是表单的名称，inputName 是表单中 ng-model 的名称。