无法将单个字符串推入数组而不更改字符串值

Question

我有一个名为edit-customer的组件，它是一个对话框窗口，它将接收来自其他component的注入对象，并显示该注入对象的属性（名称，电子邮件） 。下面是组件代码。

HTML

<form [formGroup]="editForm">
    <mat-form-field >
        <input matInput [(ngModel)]="data.name"   placeholder="Name"  formControlName="name" >
    </mat-form-field>
    <mat-form-field >
        <input matInput [(ngModel)]="data.EMailAddresses"   placeholder="Email Id"  formControlName="email" >
    </mat-form-field>
      <button mat-flat-button (click)="onEdit()">Save</button>
</form>

TS

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

@Component({
  selector: 'atd-edit-customer',
  templateUrl: './edit-customer.component.html',
  styleUrls: ['./edit-customer.component.scss'],
})
export class EditCustomerComponent implements OnInit {
  public editForm: FormGroup;
  public someContact: IContact; 

  constructor(@Inject(MAT_DIALOG_DATA) public data: IContact,
              private fb: FormBuilder,
              public customersService: CustomersService,
              ) {} 

  public ngOnInit(): void {
    this.editForm = this.fb.group({
      name: [null],
      email: [null,[Validators.email],
    });
  }

  public onEdit(): void {
    this.someContact = this.editForm.value;
    this.someContact.EMailAddresses= [];
    this.someContact.EMailAddresses.push(this.editForm.value.email); <========
    this.customersService.updateContact(this.someContact);
  }
}

JSON看起来像这样：

export interface IContact {
  id:       string;
  name:     string
  emailId:  string[];
}

现在的问题是：

• 当我按下 SAVE （保存）按钮而未在email输入字段中进行任何更改时， PUT 操作没有发生，我得到以下响应：

• 但是，如果在email输入字段中进行了一些更改并点击 SAVE （保存）按钮，则 PUT 操作会很好。

我正在这样推送电子邮件：

this.someContact.EMailAddresses= [];
this.someContact.EMailAddresses.push(this.editForm.value.email); 

代码有什么问题？

Answer 1

真的；您的问题不清楚。

但是据我了解；当用户按下保存按钮而不进行任何更改时，您会遇到问题。

要解决此问题，请勿将ngModel与formControlName一起使用；只是元素中的一个。

您的情况如何？

您将email控件的默认值设置为null，并且不会通过ngModel进行填充，因此；如果没有新输入的值，它将保持null直到添加新值。

但是我可以看到值吗？！

是；由ngModel（而不是控件）填充。

尝试一下：

public ngOnInit(): void {
    this.editForm = this.fb.group({
        name: [this.data.name],
        email: [this.data.EMailAddresses.,[Validators.email],
    });
}

然后从fromFields中删除ngModel。

BTW，将ngModel与formControlName一起使用会在较新版本的 Angular 中引起错误。