为什么 Angular 将 undefined 设置为空的 ng-model 字段答案

【问题标题】：Why angular sets undefined to empty ng-model fields为什么 Angular 将 undefined 设置为空的 ng-model 字段
【发布时间】：2014-10-01 09:26:03
【问题描述】：

我在 Angular (1.2) 和 Laravel (4.2) 中有简单的 crud 应用程序。对于简单的 crud 操作，我使用高效的 Eloquent 方法：

$product->fill(Input::all());

它从请求负载中获取所有字段，但是当我需要使用空字段更新模型时会出现问题。

在编辑操作中，我有一个表单，其中填充了我的服务的 $resource get 方法的响应：

adminModule.factory 'Product', ($resource) ->
  $resource '/admin/products/:id', { id: '@id' }, {
    query: { method: 'GET', isArray: false }
    update: { method: 'PUT' }
  }

控制器：

adminModule.controller 'ProductFormEditController', ($scope, Product, $stateParams) ->

  $scope.formData = Product.get({id: $stateParams.id})

和html：

    <input  type="text" data-ng-model="formData.name" name="name" class="form-control" id="name"
                           placeholder="Nazwa" data-server-error required>

如果我清除此字段值并确实提交 $scope.formData 的值设置为 undefined 并且不包含在 PUT 请求中，因此 Laravel 模型填充方法无论如何都看不到该字段并且不为验证设置空值，但采用模型的原始值。

问题是：如何从 ngModel 发送空字符串而不是 undefined？

附言如果输入类型是 Textarea，则 $resource 发送空的“”字符串：-/，所以我很困惑...

【问题讨论】：

标签： angularjs laravel angular-resource

【解决方案1】：

当您在输入上有“必需”指令时，将永远不会设置空值（因此它将是未定义的）。

查看源代码（文件 input.js 中的“requiredDirective”），当输入为空白时，没有检索到值以存储在模型中：

if (attr.required && ctrl.$isEmpty(value)) {
   ctrl.$setValidity('required', false);
      return;
   } else {
      ctrl.$setValidity('required', true);
      return value;
}

恕我直言，无论如何这是一个有点奇怪的用例：您确实想要客户端验证，但仍想向服务器提交无效值，对吧？

我想你可以编写自己的验证（“my-required”）来做到这一点。

或者，您可以在将数据发布到服务器之前复制默认值，例如使用 lodash（或下划线）：

_.defaults(formData, { name: ""});

【讨论】：

我需要输入所需的属性导致 Angular 表单验证...是的，我在表单标签上没有验证它没有帮助
不幸的是，这不是“必需”在角度工作的方式。请参阅我编辑的答案。

【解决方案2】：

您可以配置 angular 以设置模型，即使该值对于来自 ngModelOptions 的属性 allowInvalid 无效。

allowInvalid：布尔值，表示可以使用未正确验证的值设置模型，而不是将模型设置为未定义的默认行为。

API Reference

例子：

<input 
   type="text" 
   ng-model="myvalue"
   ng-model-options="{ allowInvalid: true }"/>

【讨论】：

完美 - 我想知道为什么我的模型被设置为undefined，每当我的验证失败时！这解决了这个问题。谢谢！