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

Posted 2023-03-13

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

【英文标题】：Warning messages are displaying even after the data present in the input field

【发布时间】：2019-05-12 08:22:06

【问题描述】：

我有一个组件用于显示来自 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, Validatorsfro'@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": "[phone]"
      ,
      
        "type": "Business",
        "number": "[phone]"
      ,
      
        "type": "Unknown",
        "number": "[phone]"
      
   ],

更新照片

更新Stckblitz link

【问题讨论】：

因为它是editable form，并且如果用户将任何输入字段设为空( say first name)。然后它应该显示输入字段(i,e first name ) 为空的警告消息。

但firstname 和lastname 也是必填字段，它们不会抛出错误。

@Shankarguru 在创建客户时是否应用了相同的手机验证验证？

是的，此验证适用。

@Shankarguru 看看：stackblitz.com/edit/angular-q69nxd

【参考方案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

【讨论】：

在同一个示例中，我想使用paragraph 显示另一个名为email 的值，而不是像更新的照片 中那样使用input field。这个怎么做。请在更新的 stackblitz 链接

中进行编辑

@Shankarguru 完成，检查一次！ HERE

我知道使用 value 显示，我可以使用 formcontrol 名称显示吗？？

你是否在 ts 文件中赋值？

@Shankarguru 编辑了 stackBlitz，有一个 look