angularjs - 数据未显示且 sbmit 按钮无法正常工作 MEAN 堆栈
问题描述
处理一个演示项目(试图学习 MEAN 堆栈),我不确定它是什么,但我无法将数据输出。
有人可以查看我是否拼写错误或错误命名了文件?此外,即使未填写表单,提交按钮也会提交数据。
后create.component.html
<h2 align = "center">Fill Out the Form Below: </h2>
<!-- How to comment -->
<mat-card style="margin:1;" style="width: 37%">
<form (submit)=onAddName() class="information-form" #postForm="ngForm">
<mat-form-field class = "information-full-width">
<input
matInput
placeholder="First name"
name="first"
ngModel
required
#first="ngModel">
<mat-error *ngIf="first.invalid">First Name is <strong>required</strong></mat-error>
</mat-form-field>
<mat-form-field class = "information-full-width">
<input
matInput
placeholder="Last Name"
name="last"
ngModel
required
#last="ngModel">
<mat-error *ngIf="last.invalid">Last Name is <strong>required</strong></mat-error>
</mat-form-field>
<p>
<mat-form-field class = "information-full-width">
<input
matInput
placeholder="Email"
[formControl]="emailFormControl"
name="email"
ngModel
required>
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
Please enter a valid email address
</mat-error>
<mat-error *ngIf="emailFormControl.hasError('required')">
Email is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field class = "information-full-width">
<input
matInput
placeholder="Address"
name = "address"
ngModel
required
#address="ngModel">
<mat-error *ngIf="address.invalid">Address is <strong>required</strong></mat-error>
</mat-form-field>
</p>
<mat-form-field class = "information-full-width">
<input
matInput
placeholder="City"
name = "city"
ngModel
required
#city="ngModel">
<mat-error *ngIf="city.invalid">City is <strong>required</strong></mat-error>
</mat-form-field>
<mat-form-field class = "information-full-width">
<input
matInput
placeholder="State"
name="state"
ngModel
required
#state="ngModel">
<mat-error *ngIf="state.invalid">State is <strong>required</strong></mat-error>
</mat-form-field>
<mat-form-field class = "information-full-width">
<input
matInput
#postalCode
maxlength="5"
matInput
placeholder="Zip Code"
name="zip"
ngModel
required
#zip="ngModel">
<mat-error *ngIf="first.invalid">Zip code is <strong>required</strong></mat-error>
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
<button mat-raised-button color="warn" type="submit">Submit</button>
</form>
</mat-card>
这是我的 post-create.ts
import { Component } from '@angular/core';
import {FormControl, Validators, NgForm} from '@angular/forms';
import { InformationService } from '../information.service';
@Component(
{
selector: 'app-post-create',
templateUrl: './post-create.component.html',
styleUrls: ['./post-create.component.css']
}
)
export class PostCreateComponent {
enteredFirstName = '';
enteredLastName = '';
enteredAddress = '';
enteredEmailAddress = '';
enteredCity = '';
enteredState = '';
enteredZipCode = '';
emailFormControl = new FormControl('', [
Validators.required,
Validators.email
]);
// informationEntered = new EventEmitter<Information>();
constructor(public informationService: InformationService) {}
onAddName(form: NgForm) {
if (form.invalid) {
return;
}
// const information: Information = {
// first: form.value.first,
// last: form.value.last,
// email: form.value.email,
// state: form.value.state,
// zip: form.value.zip,
// address: form.value.address,
// city: form.value.city
// };
this.informationService.addInformation(form.value.first,
form.value.last,
form.value.email,
form.value.state,
form.value.zip,
form.value.address,
form.value.city);
form.resetForm();
}
}
这是我的 post-information.component.html
<mat-accordion multi="true" *ngIf="information.length > 0">
<mat-expansion-panel *ngFor="let info of information">
<mat-expansion-panel-header>
{{ info.email }} {{ info.city }} {{ info.state }} {{ info.zip }} {{ info.first }}
</mat-expansion-panel-header>
{{ info.email }} {{ info.city }} {{ info.state }} {{ info.zip }} {{ info.first }}
</mat-expansion-panel>
<mat-action-row>
<button mat-button color = "primary" >EDIT</button>
<button mat-button color = "warn" >DELETE</button>
</mat-action-row>
</mat-accordion>
<p align = center class = "info-text mat-body-1" *ngIf="information.length <= 0" > No information added yet.</p>
这是我的 post-information.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Information } from '../post.model';
import { InformationService } from '../information.service';
import { Subscription } from 'rxjs';
@Component(
{
selector: 'app-post-information',
templateUrl: './post-information.component.html',
styleUrls: ['./post-information.component.css']
}
)
export class PostInformationComponent implements OnInit, OnDestroy {
information: Information[] = [];
private informationSubs: Subscription;
constructor(public informationService: InformationService) {}
ngOnInit() {
this.informationService.getInfo();
// this.information = this.informationService.getInfo();
this.informationSubs = this.informationService.getInfoUpdateListener()
.subscribe((information: Information[]) => {
this.information = information;
});
}
ngOnDestroy() {
this.informationSubs.unsubscribe();
}
}
任何帮助或指导都会很棒!
解决方案
我发现反应式表单更容易使用验证:
https://angular.io/guide/reactive-forms
您可以创建一个表单对象,而不是 ngModel,并将表单控件作为输入。
这是另一个很好的参考:
https://toddmotto.com/angular-2-forms-reactive
验证表单后,使用 setValue 并调用服务方法将数据发送到任何地方。
推荐阅读
- c# - 如何删除 C# 使用 Interop.Excel 生成的 Excel 数据透视表顶部的“数据”一词?
- javascript - Flask/jinja2/JavaScript/HTML/Bootstrap TypeError:无法读取 null 的属性“classList”
- rust - Cargo 工作空间中具有不同功能的多个版本的本地依赖项 (Rust)
- node.js - Express delete-route 不适用于 Angular 应用程序
- python - sudo apt install python3-pyqt5 和其他 apt install 方法
- javascript - Javascript/Typescript:如何在深度嵌套的 javascript 数组中设置一个已知属性
- docker - 从主机访问在 docker 上运行的服务器
- javascript - javascript fetch() arrayBuffer 行为奇怪
- python - 具有来自分类器的预测值的数据框
- c++ - 我不确定为什么会收到此错误:“C++ 没有运算符与这些操作数匹配,操作数类型是:设置
= 设置 "