I am utilizing a component to exhibit various information (such as first name, last name, phone number, etc.) fetched from the API. The main focus is on executing CRUD operations, particularly the update operation.
Referencing the image below:
https://i.sstatic.net/jRzQj.png
An issue arises when I click the SAVE button even though there is data in the input field(such as phone number). It continues to display warning messages (e.g., mat-error). As shown in the image below:
https://i.sstatic.net/7463t.png
Here is the code snippet for my component:
HTML
<form [formGroup]="editForm">
<div>
<mat-form-field>
<input matInput placeholder="First Name" formControlName="firstname" required>
<mat-error *ngIf="editForm.controls.firstname.hasError('required')">
Please enter first name
</mat-error>
</mat-form-field>
</div>
<div>
<mat-form-field class="example-full-width">
<input matInput placeholder="Last Name" formControlName="lastname" required>
<mat-error *ngIf="editForm.controls.lastname.hasError('required')">
Please enter last name
</mat-error>
</mat-form-field>
</div>
<div>
<mat-form-field class="phone-number">
<input matInput placeholder="Phone Number" formControlName="phonenumber" required>
<mat-error *ngIf="editForm.controls.phonenumber.hasError('required')">
Please enter phone number
</mat-error>
<mat-error *ngIf="editForm.controls.phonenumber.hasError('pattern')">
Please enter a valid phone number
</mat-error>
</mat-form-field>
</div>
<div class="btn-sec">
<button mat-flat-button type="button" >Cancel</button>
<button mat-flat-button type="submit" (click)="onEditForm()">Save</button>
</div>
<form>
TS
import{ Component, Inject, Input, OnInit, ViewChild } from '@angular/core';
import{ FormBuilder, FormControl ,FormGroup, Validators}fro'@angular/forms';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
import {IContact } from 'src/app/models/app.models';
@Component({
selector: 'wsd-update-customer',
templateUrl: './wsd-customer.component.html',
styleUrls: ['./wsd-customer.component.css'],
})
export class EditCustomerComponent implements OnInit {
public editForm: FormGroup;
constructor(@Inject(MAT_DIALOG_DATA) public data: IContact,
private fb: FormBuilder,
public dialog: MatDialog) {}
public ngOnInit(): void {
this.editForm = this.fb.group({
firstname: [ null, [Validators.required],
lastname: [null, [Validators.required],
phonenumber: [null, [Validators.required, Validators.pattern('[0-9]+')]],
});
this.editForm.get('firstname').setValue(this.data.firstName);
this.editForm.get('lastname').setValue(this.data.lastName);
this.editForm.get('phonenumber').setValue(this.data.phoneNumbers[0].number);
}
public onEditForm(): void {
this.markAsDirty(this.editForm);
}
private markAsDirty(group: FormGroup): void {
group.markAsDirty();
for (const i in group.controls) {
group.controls[i].markAsDirty();
}
}
}
models.ts file
export interface IContact {
firstName: string;
lastName: string;
phoneNumbers: IPhoneNumber[];
}
export interface IPhoneNumber {
type: string;
number: string;
}
JSON
{
"firstName": "Adaline",
"lastName": "Danat",
"phoneNumbers": [
{
"type": "Home",
"number": "+62 342 886 8201"
},
{
"type": "Business",
"number": "+63 704 441 1937"
},
{
"type": "Unknown",
"number": "+63 530 693 2767"
}
]
}
Updated Photo
https://i.sstatic.net/XMC1l.png
Updated Stckblitz link