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

Question

我有一个组件用于显示来自 api 的一些数据（即名字、姓氏、电话...等）。为了执行 CRUD 操作，特地 update 操作，。
如下图：

我遇到了一个问题，当我点击 SAVE 按钮时，即使是 输入字段（即电话） 中存在的数据也是如此。它仍在显示警告消息（即 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 link

Answer 1

您可以使用 FormGroup 和 FormControl 的组合，其中 FormGroup 接受 AbstractControl 类的对象。

因此，如果您使用 FormGroup，则它接受名为 controlsConfig 的参数，该参数描述：

@param controlsConfig 子控件的集合。每个孩子的关键是其注册的名字

所以只需使用 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 的值，有三种方法可以做到这一点

1) 对数据本身使用双向数据绑定，例如：

<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