I have a component named ContactUpdater that appears in a dialog window. This component is responsible for displaying the injected object and executing a PUT operation on that injected object. The code for the component is shown below:
HTML
<form [formGroup]="updateForm">
<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 Address" formControlName="Email">
<mat-error *ngIf="updateForm.controls.email.hasError('email')>
Please enter a valid email address
</mat-error>
</mat-form-field>
<button mat-flat-button (click)="onClick()">Save</button>
</form>
TS
import { Component, Inject, OnInit} from '@angular/core';
import {
FormBuilder,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef, } from '@angular/material';
import { IContact } from 'src/app/models';
import { MyService } from 'src/app/services/my.service';
@Component({
selector: 'app-update-contact',
templateUrl: './update-contact.component.html',
styleUrls: ['./update-contact.component.scss'],
})
export class UpdateContactComponent implements OnInit {
public updateForm: FormGroup;
public someContact: IContact
constructor(@Inject(MAT_DIALOG_DATA) public data: IContact ,
private fb: FormBuilder,
public dialog: MatDialog,
public myService: MyService,
) {}
public ngOnInit(): void {
this.updateForm = this.fb.group({
Name: [null],
Email: [null,[Validators.email]],
});
}
public onClick() {
this.someContact= this.updateForm.value;
this.someContact.EMailAddresses = [];
this.someContact.EMailAddresses.push(this.updateForm.value.Email);
this.myService.updateContact(this.someContact, this.someContact.Id);
}
}
Contact JSON
{
"Id": "",
"Name": "",
"EMailAddresses": [""],
},
Services file
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import {IContact } from 'src/app/models';
@Injectable({
providedIn: 'root',
})
export class MyService {
private baseUrl : string = '......api Url.....';
constructor(private http: HttpClient) {
}
public updateContact(Id : string): Observable<object> {
const apiUrl: string = `${this.baseUrl}/contacts/${Id}`;
return this.http.put(apiUrl, contact);
}
}
When clicking the SAVE button without making any changes to the Email input field, I encounter an issue while trying to execute the PUT operation and receive the following error message.