Angular ng-model 在编辑时被设置为未定义答案

【问题标题】：Angular ng-model is being set to undefined on editAngular ng-model 在编辑时被设置为未定义
【发布时间】：2016-03-07 07:28:22
【问题描述】：

我正在创建一个模态对话框并尝试在对话框关闭时读取字段，但是在编辑输入时，输入字段的 ng-model 被设置为未定义。对于Plunk，如果您单击对话框按钮，然后在不修改文本字段的情况下按确定，它将显示“blah”。但是如果你完全修改文本输入，那么什么都不会显示。

对话框模板是：

  <script type="text/ng-template" id="simpleModal.html">
    <div class="modal-header">
      <h3 class="modal-title">Simple Modal</h3>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label for="emailInput">Email</label>
        <input id="emailInput" type="email" class="form-control" ng-model="user.email">
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn" type="button" ng-click="ok()">Ok</button>
    </div>
  </script>

还有模态对话框的控制器：

app.controller('SimpleModalController', function($scope, $uibModalInstance, $log) {

  $scope.user = {
    email: "blah"
  };

  $scope.ok = function() {
    $log.debug('simpleModal ok called ' + $scope.user.email);
    $uibModalInstance.close($scope.user.email);
  };

});

我看到了对 https://stackoverflow.com/a/22768720/552936 的引用，但我已经更改了代码以反映这一点，但它并没有解决问题。

【问题讨论】：

type is email - 如果您输入有效的电子邮件，它会起作用。如果它不是一个有效的电子邮件，它将是未定义的。

标签： angularjs angular-ui-bootstrap angular-ui

【解决方案1】：

您已在模态输入字段中声明输入type="email"

<input id="emailInput" type="email" class="form-control" ng-model="user.email">

如果数据根据电子邮件传递，它将传递价值。喜欢a@b.com

您可以检查数据是否有有效的电子邮件

HTML

<form name="myForm">
  <input type="email" name="myEmail" model="myEmail" />
  <span>Valid Email {{myForm.myInput.$valid}}
</form>

PLUNKR

如果您想传递任何字符串，则必须将其设为 type="text"。

【讨论】：

该死的我花了 2 天时间试图调试为什么会发生这种情况，却发现问题是在输入字段上草率地复制粘贴。谢谢你的回答。

【解决方案2】：

将其设置为未定义的原因是因为您输入的电子邮件地址为 type=email。如果您在该字段中输入除有效电子邮件地址之外的任何内容，则 user.email 将被设置为未定义。

我刚刚运行了您的 plunker 并输入了一个有效的电子邮件地址，并且可以看到它已正确设置。在这种情况下，您应该在允许提交之前验证它是一个格式正确的电子邮件地址。

【讨论】：