无法将隐藏的输入值从Angular传递到PHP
我创建了一个表单,希望用户在其中选择他们想要的房间。如果我这样做作为一个下拉列表或作为一个输入类型,他们在其中键入的信息,它是通过PHP通过电子邮件提交 但是,如果我将输入类型更改为hidden,该值将完全消失,我在控制台中看到的是:无法将隐藏的输入值从Angular传递到PHP,php,angular,angular2-forms,hidden-field,Php,Angular,Angular2 Forms,Hidden Field,我创建了一个表单,希望用户在其中选择他们想要的房间。如果我这样做作为一个下拉列表或作为一个输入类型,他们在其中键入的信息,它是通过PHP通过电子邮件提交 但是,如果我将输入类型更改为hidden,该值将完全消失,我在控制台中看到的是: <input _ngcontent-c4 name="room" type="hidden" value class="ng-untouched ng-pristine ng-valid"> 然后,在网络中,没有任何对象显示为房间的对象。注意:确实会
<input _ngcontent-c4 name="room" type="hidden" value class="ng-untouched ng-pristine ng-valid">
然后,在网络中,没有任何对象显示为房间的对象。注意:确实会出现其他对象
然后,如果我简单地将样式更改为display:none;然后输入值=ChosenRoom,电子邮件中不发送任何内容。事实上,尽管在控制台中显示为
<input _ngcontent-c4 name="room" style="display: none;" type="text" value="ChosenRoom" class="ng-untouched ng-pristine ng-valid">
该对象未显示在网络中
知道有什么问题吗
代码:
我也把它贴在了一个简陋的Plunker上:
此选项有效,但用户必须在以下表单中键入房间名称:
HTML注释:我省略了表单的剩余代码,假设它与本例无关。如果你认为这会有帮助,我也很乐意发布
<form (submit)="sendEmail(message)" #f="ngForm">
<input type="text" name="room" [(ngModel)]="message.room" #room="ngModel">
<button type="submit" [disabled]="f.invalid" *ngIf="!f.submitted">
</form>
HTML-这一个不显示控制台中的值
<form (submit)="sendEmail(message)" #f="ngForm">
<input type="hidden" name="room" [(ngModel)]="message.room" #room="ngModel" value="ThisRoom">
<button type="submit" [disabled]="f.invalid" *ngIf="!f.submitted">
</form>
HTML-这一个显示控制台中的值,但不显示网络中的任何对象
<form (submit)="sendEmail(message)" #f="ngForm">
<input type="text" style="display: none;" name="room" [(ngModel)]="message.room" #room="ngModel" value="ThisRoom">
<button type="submit" [disabled]="f.invalid" *ngIf="!f.submitted">
</form>
Typescript:Contact.Service.TS
PHP
我感谢任何帮助或想法
谢谢
布拉德我找到了解决这个问题的办法。它完全避免了隐藏字段,我仍然不确定它们是否是问题所在 工作解决方案: contact.component.html-在这里,我避免了隐藏的输入,并将文本传递到消息旁边。特别注意“这个特别的房间” 其他内容保留为contact.service.ts和email.php
当然,这是一个小小的改动。如果我想传递更多信息,这可能会很快导致代码混乱 首先,没有添加值,是因为ngModel覆盖了值,因此与隐藏的事实无关。其次,我建议您在这里使用模型驱动的表单。有时,模型驱动的表单有些过分,但在这种情况下,我会使用一个。所以我想如果你想考虑的话,我会把这个选项交给你。 您需要导入ReactiveFormsModule并将其添加到ngModule中的imports数组中。然后将以下内容导入组件并将FormBuilder注入构造函数: 从“@angular/forms”导入{FormBuilder、FormGroup、Validators}; 构造函数私有fb:FormBuilder{} 然后使用所需的验证器构建表单: this.myForm=this.fb.group{ 房间:[“保险单”], 名称:[,Validators.required], 电子邮件:[,[Validators.required,Validators.pattern'[a-z0-9.[UZ0%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$']], 消息:[,[Validators.required,Validators.minLength10]] } 然后,您可以摆脱双向绑定,改为使用表单控件进行交换。好的是,您根本不需要在模板中包含文件室。它已经很好地位于表单对象中:下面是带有错误消息的名称输入示例: 请输入您的姓名 提交表单时,使用myForm.value作为参数。然后,该对象与IMessage类型的对象相同,您可以将post请求直接用于该对象
这是上面的一个例子。隐藏值是否包含在角度中?如果没有,你能尝试在plunker中重现这个问题吗,因为我可以在angular代码中包含隐藏字段。好主意@AJT_82我在帖子中添加了一个基本plunker。我已经找到了另一种解决方案,可以避免隐藏字段问题。所以,我不确定我是否真的可以做一个隐藏的字段。这与它被隐藏无关。ngModel覆盖了值。另外,双向绑定也没有什么意义,因为您很可能从表单中获得相同的对象:而且,在这种情况下,我可能会建议使用模型驱动的表单,使用它可以很容易地创建隐藏属性:如果您想坚持使用模板驱动的表单,我建议您将默认值设置为房间。
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Resolve } from '@angular/router';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
export interface IMessage {
name?: string,
email?: string,
room?: string,
daterange?: string,
message?: string
}
@Injectable()
export class AppService {
private emailUrl = '/assets/email.php';
constructor(private http: Http) {
}
sendEmail(message: IMessage): Observable<IMessage> | any {
return this.http.post(this.emailUrl, message)
.map(response => {
console.log('Sending email was successfull', response);
return response;
})
.catch(error => {
console.log('Sending email got error', error);
return Observable.throw(error)
})
}
}
<?php
header('Content-type: application/json');
$errors = '';
if(empty($errors))
{
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$from_email = 'general@mywebsite.com';
$message = $request->message;
$from_name = $request->name;
$to_email = "myemail@gmail.com";
$contact = "<p><strong>Name:</strong> $from_name</p>
<p><strong>Email:</strong> $request->email</p>
<p><strong>Room:</strong> $request->room</p>
<p><strong>Dates:</strong> $request->daterange</p>";
$content = "<p><strong>Message:</strong><p>$message</p>";
$website = 'My Currently Not but soon to be Functioning Website';
$email_subject = "$website: Received a message from $from_name";
$email_body = '<html><body>';
$email_body .= "$contact $content";
$email_body .= '</body></html>';
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$headers .= "From: $from_email\n";
$headers .= "Reply-To: $from_email";
$result = mail($to_email,$email_subject,$email_body,$headers);
$response_array['status'] = 'success';
$response_array['from'] = $from_email;
$response_array['result'] = $result;
echo json_encode($response_array);
header($response_array);
return $from_email;
} else {
$response_array['status'] = 'error';
echo json_encode($response_array);
header('Location: /error.html');
}
?>
<form (submit)="sendEmail(message, 'This particular room')" #f="ngForm">
...
</form>
import { Component, OnInit, HostBinding } from '@angular/core';
import { AppService, IMessage } from '../../contact/contact.service';
@Component({
selector: 'app-contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css']
})
export class TheensuiteComponent implements OnInit {
message: IMessage = {};
constructor(private appService: AppService) { }
sendEmail(message: IMessage, room:string) {
message.room = room;
this.appService.sendEmail(message).subscribe(res => {
console.log('ContactComponent Success', res);
}, error => {
console.log('ContactComponent Error', error);
})
}
ngOnInit() {
};
}
}