angular - 我无法将表单中的数据发送到 typescript angular
问题描述
我尝试使用 node js 和 angular (material ui) 开发一个全栈应用程序。我阻止了以下问题的问题。
如何从 angular 表单中恢复数据?我正在制作一个小型网络资源管理应用程序。我目前处于Mysql数据库中数据的注册和发送阶段。
服务器,他发送请求:
const express = require('express');
const app = express();
var cors = require('cors');
var mysql = require('mariadb');
const body = require("body-parser");
app.use(body.urlencoded({ extended: false }));
app.use(body.json());
app.use(cors());
var connection = mysql.createPool({
host : 'localhost',
user : 'root',
password : '',
database : 'totale',
});
app.get('/', function (req, res) {
res.send('Hello World!');
console.log(req);
});
app.post("/inscription",(req,res)=>{
var nom = req.body.name;
var prenom = req.body.lastname;
var mail = req.body.email;
var password = req.body.password;
connection.getConnection().then(conn => {
conn.query("INSERT INTO `inscription` (nom,prenom,mail,password) values (?,?,?,?);",[nom,prenom,mail,password],function(err, rows) {
if (err) throw err;
console.log('The solution is: ', rows[0].solution);
});
});
//connection.end();
});
app.listen(3000, function () {
console.log('app listening on port 3000!');
});
HTML 表单:
<form [formGroup]="signupForm" class="example-form" (ngSubmit)="onFormSubmit(signupForm)" novalidate>
<mat-form-field class="example-full-width">
<input type="text" id='email' name='email' matInput placeholder="Enter your email"/>
</mat-form-field>
<mat-form-field class="example-full-width">
<input type="text" id='name' name='name' matInput placeholder="Nom">
</mat-form-field>
<mat-form-field class="example-full-width">
<input type="text" id='lastname' name='lastname' matInput placeholder="Prenom" >
</mat-form-field>
<mat-form-field class="example-full-width">
<input type="password" id='password' name='password' type="password" matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
</button>
</mat-form-field>
<div class="example-button-row">
<button type="submit" mat-raised-button>Inscription</button>
</div>
</form>
打字稿,取数据:
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { User } from './../User';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import {tap} from 'rxjs/operators';
import {NgForm} from '@angular/forms';
@Component({
selector: 'app-inscription',
templateUrl: './inscription.component.html',
styleUrls: ['./inscription.component.css']
})
export class InscriptionComponent implements OnInit {
signupForm;
results;
constructor (private http: HttpClient, private formBuilder: FormBuilder)
{}
ngOnInit() {
this.signupForm = this.formBuilder.group({
email :"",
name :"",
lastname :"",
password :"",
});
}
public onFormSubmit() {
const configUrl = 'http://localhost:3000/inscription';
this.http.post(configUrl,this.signupForm.value)
.pipe(
tap(
data => console.log(configUrl, data),
error => console.log(configUrl, error)
)
)
.subscribe(results => this.results = results);
}
}
解决方案
您忘记将 formControlName 属性添加到所有表单字段。
如下更改您的表单,然后您的表单数据将在您的 ts 文件中可用。
<form [formGroup]="signupForm" class="example-form" (ngSubmit)="onFormSubmit(signupForm)" novalidate>
<mat-form-field class="example-full-width">
<input type="text" id='email' name='email' formControlName="email" matInput placeholder="Enter your email"/>
</mat-form-field>
<mat-form-field class="example-full-width">
<input type="text" id='name' name='name' formControlName="name" matInput placeholder="Nom">
</mat-form-field>
<mat-form-field class="example-full-width">
<input type="text" id='lastname' name='lastname' formControlName="lastname" matInput placeholder="Prenom" >
</mat-form-field>
<mat-form-field class="example-full-width">
<input type="password" id='password' name='password' formControlName="password" type="password" matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
</button>
</mat-form-field>
<div class="example-button-row">
<button type="submit" mat-raised-button>Inscription</button>
</div>
</form>
推荐阅读
- reactjs - 在 componentDidMount 内多次调用 API
- java - 如何将图像从数据库显示到界面?(Java 和 MySQL 工作台 6.3)
- cassandra - Cassandra 备份系统密钥空间
- python - 从数据块中提取foursquare api数据
- google-cloud-platform - Cloud Scheduler 结果失败,尽管 Http 请求仍在运行
- javascript - 如何访问以下数组中的 ID 和 pID?
- node.js - MongoDB Stitch - 如何在更新时将数据类型保持为 int(不更改为 double)?
- c# - 根据不同的字段/整数进行选择和分组
- git - 如何查看我推送的所有远程分支
- mysql - 表univ/#sql-bf4_4的外键约束错误: