Question

我有一个用于显示 api 中的数据（即名字，姓氏，电话等）的组件。为了专门执行CRUD操作，更新操作。
如下图所示：

当我点击保存按钮，甚至是输入字段（即电话）中的数据时，我也遇到了问题。它仍然显示警告消息（例如，垫错误）。如下图所示：

下面是我的组件代码

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，然后为特定的Control添加验证和默认值即可：

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）您将FormContol与readonly属性一起使用

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

Working StackBlitz Example

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

1 个答案: