Error "TypeError: Cannot read property 'email' of undefined" using AngularJS and Ionic

Question

I have the following form using AngularJS and Ionic:

<ion-modal-view class="game" ng-controller="PdfsmtpCtrl">

  <ion-header-bar class="bar bar-balanced">
    <a class="button button-icon icon ion-close-circled" ng-click="hideInformation()"></a>
    <h1 class="title">PDF-Export per Email</h1>
    <a type="submit" ng-click="getPdf(user)" class="button button-icon icon ion-checkmark-circled"></a>
  </ion-header-bar>

  <ion-content scroll="false" class="game">
        <div>
            <form novalidate class="simple-form">
              <label>E-mail: <input type="email" ng-model="user.email" /></label><br />
              <input type="submit" ng-click="getPdf(user)" value="Save" />
            </form>
        </div>
    </ion-content>

</ion-modal-view>

UPDATE: Here is the related AngularJS code:

'use strict';

angular.module('app')
.controller('PdfsmtpCtrl', function ($scope, Pdfsmtp)
{   
    $scope.pdfsmtp = new Pdfsmtp();

    $scope.hideInformation = function ()
    {
        $scope.pdfsmtpModal.hide();
    };


    //joey: PDF to generate
    $scope.getPdf = function (user)
    {
        var user = angular.copy(user);
        var emailReceiver = user.email;
        
        var emailSubject = "<SubjectText>";
        var emailBody = "<BodyText>";
        var emailSender = "<EmailAddress>";
        var fileName = "<FileName.pdf>";
        var hostName = "<SenderHostName>";
        var contentType = "application/pdf";
        
     
        var doc = new jsPDF
        ({
            orientation: 'p',    // p = portrait, l = landscape
            unit: 'mm', 
            format: [210, 297],
        });
    
    //joey: Simon Bengtsson and his autotable
    doc.setFontSize(22);
    doc.setTextColor(23, 154, 85);
    doc.text(("<SomeText>"), 14, 15);
    doc.autoTable(
    {
        startY: 30,
        startX: 30,
        headStyles: {fillColor: [25, 141, 79] },
        footStyles: {fillColor: [25, 141, 79] },
        theme: 'grid',
        styles: 
        {
            overflow: 'linebreak',
            lineWidth: 0.5,
            lineColor: [25, 141, 79]
        },
        html: '#resultTable',
    });
    var finalY = doc.lastAutoTable.finalY || 20;
    
    doc.setTextColor(23, 154, 85);
    doc.text('Table:                   Signature:', 14, finalY + 20);
    var blob = doc.output();
    var dataUri = "data:" + contentType + ";base64," + btoa(blob);

    Email.send(
    {
        Host: hostName,
        Username: emailSender,
        Password: "<somepassword>",
        To: emailReceiver,
        Attachments : 
        [{
            name : fileName,
            data : dataUri
        }], 
        From: emailSender,
        Subject: emailSubject,
        Body: emailBody
        }).then($scope.hideInformation());
        //}).then(message => alert(message)
    } 
});

When clicking Save in the form all goes well as the variable user will be taken over by the related function.

When clicking the icon for Submit in <ion-header-bar> the following error can be seen as the variable user is undefined:

TypeError: Cannot read property 'email' of undefined

What needs to be done that Submit can be used?

Answer 1

You should initialize the user object. That way the object won't be undefined when you are trying to access the email property.

$scope.pdfsmtp = new Pdfsmtp();
$scope.user = { email : ''};