Angular ng-model is being set to undefined on edit

Question

I'm creating a modal dialog and trying to read the fields back when the dialog is closed, but when the input is edited, the ng-model for the input field is being set to undefined. With the Plunk, if you click the dialog button and then press Ok without modifying the text field, it will display "blah". But if you modify the text input at all, then nothing will be displayed.

The dialog template is:

  <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>

And the controller for the modal dialog:

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);
  };

});

I've seen reference to https://stackoverflow.com/a/22768720/552936, but I've changed my code to reflect this and it hasn't fixed the issue.

Answer 1

You have declared input type="email" in your input field in modal

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

It'll pass value if data according to email . like [email protected]

You can check if data has valid email

HTML

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

PLUNKR

If you wanna pass any string then you have to make it type="text".