Предупреждающие сообщения отображаются даже после того, как данные присутствуют в поле ввода

Question

У меня есть компонент, используемый для отображения некоторых данных (я, имя, фамилия, телефон .... и т. Д.) Из api .Для выполнения операции CRUD специально обновление операции,
Как показано на рисунке ниже:

IУ меня возникает проблема, когда я нажимаю кнопку СОХРАНИТЬ даже данные, присутствующие в поле ввода (i, e phone) .Он по-прежнему показывает предупреждающие сообщения (например, mat-error).Как показано на рисунке ниже:

Ниже приведен код моего компонента

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 файл

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"
      }
   ],

}

Обновленная фотография

Обновлена ​​ Stckblitz ссылка

Answer 1

Вы можете сделать с комбинацией FormGroup и FormControl, где FormGroup принимает объект AbstractControl Class.

Таким образом, если вы используете FormGroup, он принимает параметр с именем controlsConfig, который описывает:

@ param controlsConfig Коллекция дочерних элементов управления.Ключом для каждого дочернего элемента является имя, под которым он зарегистрирован

Поэтому просто определите FormGroup с помощью FormControls и добавьте значение проверки и значение по умолчанию для конкретного элемента управления:

this.editForm = this.fb.group({
      firstname: new FormControl([null, [Validators.required]]),
      lastname: new FormControl([null, [Validators.required]]),
      phonenumber: new FormControl([null, [Validators.required, Validators.pattern('[0-9]+')]]),
});

РЕДАКТИРОВАТЬ:

Чтобы назначить значение formControl в p, span, кроме типа ввода, есть три способа сделать это

1) При использовании двусторонней привязки данных к самим данным, например:

<p>{{data.email}}</p>

2) При использовании FormControl:

<p>{{editForm.value.email}}</p>

, но для этого необходимо определить FormControl в TSfile и используйте setValue для присвоения значения.

email: new FormControl([null])  // define a control in the group

this.editForm.get('email').setValue(this.data.email); // set value from data object

3) Вы используете FormContol с атрибутом readonly

<mat-form-field class="example-full-width">
     <input matInput  placeholder="Email" formControlName="email" readonly>
</mat-form-field>

Пример работы с StackBlitz