Передать входные данные из Angular в NodeJS
В настоящее время я изучаю стек MEAN, и мне интересно, как я могу передавать данные из входных данных в .html в мой nodeJS app.js?
Допустим, у меня есть форма:
register.component.html:
<form>
<input type = "text" name = "surname">
<input type = "text" name = "name">
<input type = "text" name = "username">
<input type = "password" name = "password">
<input type = "submit" value = "Register">
</form>
И я хотел бы, чтобы при отправке он вызывал функцию регистрации:
резистор.компонент.тс :
register(){
this.http.post('http://localhost:3001/login/' // etc )
}
Итак, в моем app.js:
app.post('/register', function(req, res){
db.collection('users').insertOne({
prenom : //inputs data,
nom: //inputs data,
email : //inputs data,
password : //inputs data
})
})
Мой вопрос: ** Как я могу передать данные из входных данных в .html В app.js? **
Большое спасибо, извините, если этот вопрос покажется большинству из вас нубом, но я учусь! ?
Ответы 1
Во-первых, ваша форма должна применять двустороннюю привязку.
<form (ngSubmit) = "register()">
<input type = "text" name = "surname" [(ngModel)] = "input.surname" />
<input type = "text" name = "name" [(ngModel)] = "input.name" />
<input type = "text" name = "username" [(ngModel)] = "input.username">
<input type = "password" name = "password" [(ngModel)] = "input.password" />
<input type = "submit" value = "Register">
</form>
Альтернатива: работайте с реактивная форма.
В компоненте вы должны объявить объект для input (формы). Передайте объект в публикацию и убедитесь, что вам нужно .subsribe() опубликовать запрос API и получить возвращенный ответ для обработки успеха/неудачи.
Между тем URL-адрес API должен быть «/register», а не «/login» в зависимости от вашей службы NodeJS.
input: any = {
surname: "",
name: "",
username: "",
password: "",
};
register(){
this.http.post('http://localhost:3001/register', this.input)
.subscribe(
next => {
// TO-DO Success event
},
error => {
// TO-DO Error event
});
}
В то время как, если вы работаете с реактивной формой, вам потребуются FormBuilder сервис и FormGroup экземпляр (не слишком много, поскольку первая ссылка иллюстрирует процесс его использования).
Ссылка: Пример почтового запроса Angular
Не являюсь разработчиком Node.JS, но ваша реализация серверной службы должна быть:
app.post('/register', function(req, res){
db.collection('users').insertOne({
prenom : req.body.surname,
nom: req.body.surname,
email : req.body.email,
password : req.body.password
})
})
чтобы получить значение из тела запроса.
И, конечно же, ваш пароль должен быть зашифрован в соответствии с рекомендациями по безопасности перед сохранением записи в базе данных.
Да, вы правы, объявление переменной в компоненте должно использовать this (this.input) для доступа к значению. Если только при объявлении переменной в области действия функции не требуется this. Спасибо за исправление.
Не за что :) Так вот, похоже не забивает данные во ввод: any = { prenom: "", nom: "", email: "", password: "", };
Виноват. Должно быть [(ngModel)] (двусторонняя привязка), а не [ngModel] (односторонняя привязка). Демо
На самом деле это выглядит многообещающе, большое спасибо. Хотя он не добавляет данные к «вводу», он просто регистрирует некоторые пустые поля. Может быть, потому, что вы не можете использовать this.http.post('локальный: 3001/регистр', input) Но мы нужно использовать this.http.post('локальный: 3001/регистр', this.input) Извините за форматирование, оно не работает так же, как сообщение ?