Introducing the edit-customer component, a dialog window designed to receive an injected object from another component and display its properties, such as name and email. Below is the code for this 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 looks like this:
export interface IContact {
id: string;
name: string
emailId: string[];
}
The Current Issue:
- Upon hitting the SAVE button without changing the
emailinput field, the PUT operation fails with this response:
https://i.sstatic.net/Q3uCc.png
- However, if changes are made to the
emailinput field before saving, the PUT operation completes successfully.
The email address is being updated using the following code:
this.someContact.EMailAddresses= [];
this.someContact.EMailAddresses.push(this.editForm.value.email);
What could be causing this issue?