Question

我有一个名为customer的组件，用于添加新客户。组件代码如下：

HTML

<div >
  <form [formGroup]="addForm">

        <div>
          <mat-form-field>
            <input matInput placeholder="First Name" formControlName="firstname" required>
            <mat-error *ngIf="addForm.controls.firstname.hasError('required')">
              Please enter first name
            </mat-error>
          </mat-form-field>
        </div>

        <div>
          <mat-form-field>
            <input matInput placeholder="Last Name" formControlName="lastname" required>
            <mat-error *ngIf="addForm.controls.lastname.hasError('required')">
              Please enter last name
            </mat-error>
          </mat-form-field>
        </div>


        <div>
          <mat-radio-group formControlName="gender">
            <div>Gender</div>
            <mat-radio-button  value="Male">Male</mat-radio-button>
            <mat-radio-button value="Female">Female</mat-radio-button>
          </mat-radio-group>
        </div>

        <div>
          <mat-form-field>
            <input matInput placeholder="Email Address"  formControlName="email" required>
            <mat-error *ngIf="addForm.controls.email.hasError('required') ">
              Please enter email address
            </mat-error>
          </mat-form-field>
        </div>


    <div>
        <button mat-raised-button (click)="onAdd()">ADD</button>
    </div>

  </form>

TS

  import { Component, OnInit, VERSION, ViewChild } from '@angular/core';
  import {
    FormBuilder,
    FormControl,
    FormGroup,
    Validators,
  } from '@angular/forms';
 import { Router } from '@angular/router';
 import { IContact } from 'src/app/models/app.models';
 import { CustomersService } from 'src/app/services/customers.service';

 @Component({
   selector: 'asd-customer',
   templateUrl: './customer.component.html',
   styleUrls: ['./customer.component.css'],
 })

export class CustomerComponent implements OnInit {
 public addForm: FormGroup;
 public someContact: IContact;

 constructor(private fb: FormBuilder,
      public customersService: CustomersService) {}

public ngOnInit(): void {
 this.addForm = this.fb.group({
   firstname: [null, [Validators.required],
   lastname: [null, [Validators.required],
   email: ['', [Validators.required],
   gender: [null],

  });
 }

 public onAdd(): void {
   this.someContact = this.addForm.value;
   this.customersService.addCustomer(this.someContact);
 }


}

model.ts文件

export interface IContact {
  firstName:      string;
  lastName:       string;
  gender:         string;
  eMailAddresses: string[];
}

POST请求后的预期 JSON ：

 {
   "firstName": "Alfien",
   "lastName": "Urlich",
   "gender": "Male",
   "eMailAddresses": ["aurlich6v@hotmail.com"],
  }

当我填写表单的每个输入字段并尝试执行 http POST 操作时。由于email，我收到错误请求的警告。以下是警告：

当我执行 POST 操作而没有填充email(input field)时，POST很好， JSON 看起来像这样：

  {

   "firstName": "Lee",
   "lastName": "Cooper",
   "gender": "Male",
}

代码有什么问题？

Answer 1

Email-address字段中存在一个问题，在Form-control中，它是一个字符串，在接口中，它是一个数组。因此，如果您要添加它，则如下所示设置

public someContact: IContact={};
    public onAdd(): void {
     this.someContact.firstName = this.addForm.value.firstName;
     this.someContact.lastname = this.addForm.value.lastname;
     this.someContact.gender = this.addForm.value.gender; 
     this.someContact.eMailAddresses=[]
     this.someContact.eMailAddresses.push(this.addForm.value.email);
    }

更改界面如下

export interface IContact {
  firstName ?:      string;
  lastName ?:       string;
  gender ?:         string;
  eMailAddresses ?: string[];
}

但是根据您的情况，每次提交时，只有一个电子邮件地址。

以角度形式传递字符串类型的输入字段值

1 个答案: