0
私はAngularJSとPHPで本当に新鮮です。 AngularJsとPHPを使用してContact Formを開発しようとしています。ユーザーがファーストネーム、ラストネーム、電子メール、およびメッセージを入力する簡単な連絡フォームです。 私は既にHTML - AngularJSバリデーションクラスに含まれているので、バリデーションはクライアント側です（今のところ）。 私は、サーバ側でPHPで検証をコード化することが可能であることを知っています。 あなたは何が良いか教えてくれます。 問題は、私の個人的な電子メールまたはPHPファイルにある受信者の電子メールにユーザーデータとユーザーメッセージを送信するPHPをコード化する方法です。 そして、AngularJs Templateの一部として同じフォームをng-routに含める必要があります。 AngularJSのみで同じフォームをコーディングすることができれば、PHPを使用しないでください。実際の使用に適したソリューションの1つのバージョンを見つけることができます。AngularJS - ng-controllerを使用して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 - ??? :)
私は本当に学びたい人と私を助けてください。 ありがとうございました！ ;）
質問書籍、ツール、ソフトウェアライブラリ、チュートリアル、その他のオフサイトリソースは、批判的な回答や迷惑メールを引き付ける傾向があるため、スタックオーバーフローのトピックにはなりません。代わりに、[問題の説明]（https://meta.stackoverflow.com/questions/254393）とこれまで解決されてきたことがあります。 – georgeawg