Не удается передать скрытое значение ввода из Angular в переполнение стека
Я создал форму, в которой я хотел бы, чтобы пользователи выбирали комнату, которую они хотят, среди прочего. Если я делаю это как раскрывающийся список или как тип ввода, в котором они вводят информацию, она отправляется по электронной почте через PHP.
Однако, если я изменяю тип ввода на «скрытый», значение полностью исчезает, и в консоли я вижу следующее:
<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: http://embed.plnkr.co/uUhPrStdw4kDhaus2xfO/)
Этот работает, но пользователь должен ввести имя комнаты в форме:
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>
Машинопись: Contact.Service.TS
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
<?php
header('Content-type: application/json');
$errors = '';
if(empty($errors))
{
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);$from_email = '[email protected]';
$message = $request->message;
$from_name = $request->name;
$to_email = "[email protected]";
$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');
}
?>
Я ценю любую помощь или идеи.
Спасибо!
штифтик
Решение
Я нашел одно решение для этой проблемы. Это полностью избегает скрытых полей, которые я до сих пор не уверен, были ли они проблемой или нет.
Рабочее решение:
contact.component.html — здесь я избегаю скрытого ввода и пропускаю текст рядом с сообщением. Обратите особое внимание на «Эта конкретная комната»
<form (submit)="sendEmail(message, 'This particular room')" #f="ngForm">
...
</form>
contact.component.ts — Обратите особое внимание на message.room = комната;
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() {
};
}
}
Все остальное остается прежним (contact.service.ts и email.php).
Это, конечно, небольшой взлом. Если бы я хотел передать больше информации, это могло бы довольно быстро вызвать путаницу в коде.
Другие решения
Прежде всего, это значение не добавляется, потому что ngModel Переопределение value и поэтому не имеет ничего общего с тем, что скрыто. Во-вторых, я хотел бы предложить, чтобы вы могли использовать здесь управляемую моделью форму. Иногда форма, управляемая моделью, излишня, но в этом случае я бы использовал ее. Так что я подумала, что добавлю этот вариант для вас, если вы хотите рассмотреть его.
Вам нужно импортировать ReactiveFormsModule и добавить его в свой imports массив в вашем ngModule. Затем импортируйте следующее в ваш компонент и введите FormBuilder в вашем конструкторе:
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
constructor(private fb: FormBuilder) {}
Затем создайте форму с необходимыми валидаторами:
this.myForm = this.fb.group({
room: ['theEnsuite'],
name: ['', Validators.required],
email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$']],
message: ['', [Validators.required, Validators.minLength(10)]]
})
и тогда вы можете избавиться от двусторонней привязки и обменять ее с контролем формы. Хорошо, что вам не нужно включать room вообще в вашем шаблоне. Это уже хорошо сидит в форме объекта 🙂 Вот образец name ввод с сообщением об ошибке:
<input placeholder="Name" formControlName="name">
<div *ngIf="!myForm.get('name').valid && myForm.get('name').touched">
<p>Please enter your name.</p>
</div>
Когда вы отправляете форму, вы делаете это с myForm.value в качестве параметра. Этот объект тогда идентичен вашему объекту типа IMessage, который вы можете использовать почтовый запрос непосредственно с этим объектом!
Вот DEMO из вышеперечисленных.