Question

正在进行演示项目（尝试学习MEAN堆栈），我不确定它是什么，但是我无法输出数据。

有人可以查看我是否拼错或错误命名了文件吗？此外，即使未填写表单，“提交”按钮也会提交数据。

Post-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();
}

}

任何帮助或指导都会很棒！

Answer 1

我发现反应式表单更易于验证：

https://angular.io/guide/reactive-forms

您可以创建一个表单对象，而不是ngModel。

这是另一个很好的参考：

https://toddmotto.com/angular-2-forms-reactive

表单通过验证后，请使用setValue并调用服务方法以将数据发送到任何地方。

数据未显示并且sbmit按钮无法正常工作MEAN堆栈

1 个答案: