即使在输入字段中出现数据后也会显示警告消息

Question

我有一个组件用于显示来自 api[=49 的一些数据（即名字、姓氏、phone ....等） =].为了进行CRUD操作特意update操作，.
如下图：

I am facing an issue, when I click SAVE button even the data present in the input field(i,e phone). It's is still showing the warning messages(i,e mat-error). As in below image:

下面是我的组件代码

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 link

Answer 1

您可以使用 FormGroup and FormControl where FormGroup accept an object of AbstractControl Class.

的组合

因此，如果您使用的是 FormGroup，那么它会接受名为 controlsConfig 的参数，该参数描述了：

@param controlsConfig child 控件的集合。每个 child 的密钥是它注册时使用的名称

因此只需使用 FormControls 定义 FormGroup 并添加针对特定控件的验证和默认值：

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]+')]]),
});

编辑：

要在p、span中给formControl赋值，除输入类型外，有3种方法

1) 在数据本身上使用 Two-way 数据绑定，例如：

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

2) 通过使用 FormControl:

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

但是为此，你必须在TS文件中定义一个FormControl，并使用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) 使用具有 readonly 属性的 FormContol

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

Working StackBlitz Example