通过电子邮件发送 Angular Js 表单答案

【问题标题】：Email an angular Js form通过电子邮件发送 Angular Js 表单
【发布时间】：2015-07-11 16:46:56
【问题描述】：

我用 HTML 编写了一个表单，并在那里使用了 angular js。

没什么花哨的，一个带有mail to:email address 的简单表单。

链接http://www.chami.com/tips/internet/010597I.html 说它应该单独使用 mailTo 添加到操作属性。

但它不起作用。我还需要添加什么？

<!DOCTYPE HTML>
<html lang="en-US" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>Form</title>

    <meta name="viewport">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <link rel="stylesheet" href="css/styling.css" />

</head>

<body ng-app="myApp">
    <form name="userForm" action="mailto:simrankaur.adept@gmail.com" ng-controller="sample" method="POST" enctype="multipart/form-data" novalidate>
        <div class="row col-lg-offset-3">
            <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.name.$invalid && userForm.name.$dirty}">
                <label class="control-label">Name</label>
                <input type="text" class="form-control" name="name" ng-model="user.name" ng-required="true" ng-minlength="3" placeholder="Name" />
                <span class="error-message" ng-show="userForm.name.$dirty
            && userForm.name.$error.required">You are required to provide your name</span>

                <span class="error-message" ng-show="userForm.name.$dirty
            && userForm.name.$error.minlength">Your name should contain 3 or more characters</span>
            </div>
        </div>
        <div class="row col-lg-offset-3">
            <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.email.$invalid && userForm.email.$dirty }">
                <label class="control-label">Email</label>
                <input type="email" class="form-control" name="email" ng-model="user.email" ng-required="true" placeholder="Email" />
                <span class="error-message" ng-show="userForm.email.$dirty
            && userForm.name.$error.required">You are required to provide your Email Id</span>
            </div>
        </div>

        <div class="row col-lg-offset-3">
            <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.phonenumber.$invalid && userForm.phonenumber.$dirty}">
                <label class="control-label">Mobile Number</label>
                <input type="text" class="form-control" name="phonenumber" ng-model="user.phonenumber" ng-minlength="10" ng-maxlength="10" ng-required='true' placeholder="10 digit Mobile Number" />
            </div>
        </div>

        <div class="row col-lg-offset-3">
            <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}">
                <label class="control-label">Age</label>
                <input type="text" class="form-control" name="Age" ng-model="user.Age" placeholder="Age (Optional)" ng-model-options="{updateOn: 'blur'}" />
            </div>
        </div>

        <div class="row col-lg-offset-3">
            <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.Company.$invalid && userForm.Company.$dirty}">
                <label class="control-label">Company</label>
                <input type="text" class="form-control" name="Company" ng-model="user.Company" placeholder="Company Name (Optional)" ng-minlength="2" />
            </div>
        </div>

        <div class="row col-lg-offset-3">
            <!-- <button class="btn btn-primary"
          ng-disabled="userForm.$invalid"
          type="submit">Save</button>-->

            <input type="submit" value="Submit">
        </div>
    </form>
</body>

</html>

【问题讨论】：

我认为您尝试做的事情是不可能的，您需要一个后端脚本来发送实际的电子邮件。见这里：stackoverflow.com/questions/12626940/mailto-on-submit-button

标签： html angularjs

【解决方案1】：

mailto: 表单操作中的 URI 需要浏览器和电子邮件客户端，它们可以很好地协同工作。这些非常罕见，以至于在completely impractical 中使用mailto: URI。

您需要使用 HTTP(S) URI 和服务器端表单处理程序（第三方托管选项可用）。

【讨论】：