AngularJS - 使用ng-controller提交PHP表单

时间：2017-11-28 14:23:53

标签： php angularjs

我在AngularJS和PHP中真的很新鲜。我正在尝试使用AngularJs和PHP开发联系表单。这是一个简单的联系表单，用户可以在其中输入名字，姓氏，电子邮件和消息。 我已经包含在HTML - AngularJS Validation Classes中，因此验证是客户端（目前），这对我来说没问题。 我知道可以使用PHP代码验证服务器端。 你会告诉我什么更好。 问题是如何编写PHP，将用户数据和用户消息发送到我的个人电子邮件或PHP文件中的任何接收者电子邮件。 我想在ng-rout的AngularJs模板中加入相同的表格。 而且如果你只使用AngularJS编写相同的表单而不使用PHP，那么我只想找到一个适用于实际使用的解决方案版本。

那么，你们中的任何人都可以给我发一个问题的解决方案代码吗？到目前为止，这是我的代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                <title>Contact Form - AngularJS</title>
                    <!-- Bootstrap CSS -->
                        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" 
                            integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
                                <!-- Custom CSS -->
                                    <link rel="stylesheet" href="css/mainStyle.css">
                                            <!-- Angular JS form RootFolder + uiRouter CDN  -->
                                                <script src="js/angular.js"></script>
                                                   <script src="js/angular-animate.min.js"></script>
                                                        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>

  </head>
<body ng-app="app">
<div class="container-fluid ">
    <div class="d-flex flex-column">
        <div class="row justify-content-center">
            <div class="col-12 contentSection d-none d-md-block d-md-none"><!-- Content Section -->
            <!-- Contact Form  -->
            <div class="row justify-content-center">
                <div class="col-6 text-left">
                <!-- FORM -->
                <form ng-controller="formcontroller" name="contactForm" novalidate>
                    <div class="row justify-content-center">
                        <div class="col">
                        <input type="text" placeholder="Your First Name" name="firstName" ng-model="contact.firstName" ng-required="true" class="first_name"/>
                        <div ng-show="contactForm.firstName.$touched && contactForm.firstName.$invalid" class="row justify-content-center mt-2">
                        <div class="col text-left">
                        <small class="errorForm">Enter Your First Name</small>
                        </div>
                        </div>
                        </div>

                        <div class="col">
                        <input type="text" placeholder="Your Last Name" name="lastName" ng-model="contact.lastName" ng-required="true" class="last_name"/>
                        <div ng-show="contactForm.lastName.$touched && contactForm.lastName.$invalid" class="row justify-content-center mt-2">
                        <div class="col text-left">
                        <small class="errorForm">Enter Your Last Name</small>
                        </div>
                        </div>
                        </div>
                        </div>

                        <div class="row justify-content-start mt-2">
                        <div class="col-8">
                        <input type="email" placeholder="Your Email" name="emailSender" ng-model="contact.emailSender" ng-required="true" class="contact_email" />
                        <div ng-show="contactForm.emailSender.$touched && contactForm.emailSender.$invalid" class="row justify-content-center mt-2">
                        <div class="col text-left">
                        <small class="errorForm">Enter Your Valid Email</small>
                        </div>
                        </div>
                        </div>
                        </div>

                        <div class="row justify-content-start">
                        <div class="col-8">
                        <textarea placeholder="Message" name="message" ng-model="contact.message" ng-required="true" rows="5" class="cMessage"></textarea>
                        <div ng-show="contactForm.message.$touched && contactForm.message.$invalid" class="row justify-content-center mt-2">
                        <div class="col text-left">
                        <small class="errorForm">Enter Your Message</small>
                        </div>
                        </div>
                        </div>
                        </div>

                        <div class="row justify-content-start mt-4 mb-3">
                        <div class="col-10">
                        <button class="send" type="submit" ng-disabled="contactForm.$invalid">Send</button>
                        <div ng-show="successMessage" class="row justify-content-center mt-2">
                        <div class="col text-left">
                        <small class="succesForm" >Will be in touch with you soon!</small>
                        </div>
                        </div> 
                        </div>
                    </div>
                </form> 
                <!-- FORM -->
                </div>
            </div>
            </div><!-- End of Content Section -->
        </div> 
    </div>
</div>

<!-- ==================================================================================================== -->

<!-- Optional JavaScript -->
<script src="js/angularScript.js"></script>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" 
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" 
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>
</html>

Aangular JS - 到目前为止我的角度代码...... 

var app = angular.module("app", ['ui.router', 'ngAnimate']);



app.controller("formcontroller", function($scope, $http){

   });

CSS 

/*--- CONTACT ---*/
.first_name,
.last_name,
.contact_email,
.cMessage {
  width: 80%;
  outline: none ;
  border: none;
  border-radius: none;
  padding: 2vh 0 1vh 1%;
  border-bottom: 0.1vh solid rgba(0, 0, 0, 0.22);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  color: #3b634f;
  transition: 0.8s ease;
}
.first_name:hover, .last_name:hover, .contact_email:hover, .cMessage:hover {
  border-bottom: 0.1vh solid rgb(83, 143, 255);
}
/*-- Validation Classe --*/
.first_name.ng-invalid.ng-touched,
.last_name.ng-invalid.ng-touched,
.contact_email.ng-invalid.ng-touched,
.cMessage.ng-invalid.ng-touched
 {border-bottom: 0.2vh solid rgba(255, 0, 0, 0.5);}
 .errorForm {
  font-style: italic;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: rgba(255, 0, 0, 0.418);
}
.succesForm {
  font-style: italic;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: rgba(0, 255, 0, 0.61);
}
.send {
  padding: 1vh 6% 1vh 6%;
  background-color: #538a6f;
  border: none;
  border-radius: 8px;
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  cursor: pointer;
}
.send[disabled="disabled"] {
  opacity: 0.4;
  cursor: not-allowed !important; 
}
/*--- Contact SM ---*/
.contactInfoSm  p {
  font-size: 2.5vmin;
}
.first_nameSm,
.last_nameSm,
.contact_emailSm,
.cMessageSm {
  width: 100%;
  text-align: center;
  outline: none ;
  padding: 0.5vh 0 0.5vh 0;
  border: 0.1vh solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12px;
  color: #3b634f;
  text-indent: 10px;
  transition: 0.8s ease;
}
.first_nameSm:hover, .last_nameSm:hover, .contact_emailSm:hover, .cMessageSm:hover {
  border-bottom: 0.1vh solid rgb(83, 143, 255);
}
.errorFormSm {
  font-style: italic;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: rgba(255, 0, 0, 0.618);
  font-size: 2vmin;
}
.succesForm-Sm {
  font-style: italic;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: rgba(0, 255, 0, 0.61);
}

PHP - ??? ：）

请帮助我，我真的想学习这些家伙。 谢谢！ ;）

1 个答案:

答案 0 :(得分：0)

尝试在表单中使用ng-submit来触发$scope方法，然后将帖子请求发送到PHP页面，例如 看一下这个例子：http://www.chaosm.net/blog/2014/05/21/angularjs-contact-form-with-bootstrap-and-phpmailer/

相关问题
最新问题