以角度形式傳遞字符串類型的輸入字段值

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我收到“ 錯誤請求”的警告。 以下是警告：

當我在不填寫email(input field)的情況下執行POST操作時，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[];
}

但是根據您的情況，每次提交時，只有一個電子郵件地址。