时间戳

首页 > 解决方案 > 以角度传递字符串类型的输入字段值

json - 以角度传递字符串类型的输入字段值

问题描述

我有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);
 }


}

模型.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 的情况下执行POST操作时， JSON看起来像这样：email(input field)

  {

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

代码有什么问题？？

标签： jsonangulartypescriptangular6

解决方案

电子邮件地址字段存在问题在表单控件中它是一个字符串，而在界面中它是一个数组。因此，如果您想添加它，请将其设置如下，

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[];
}

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

推荐阅读