角度是需要验证答案

【问题标题】：angular is required validation角度是需要验证
【发布时间】：2021-07-06 19:44:08
【问题描述】：

仅在单击字段时才显示错误或显示错误，但现在在我当前的实现中，当调用 setRequiredVlidations 并且组件加载时，已显示所需的消息，如您在图像上看到的那样。它应该只在我点击输入字段或字段被触摸时显示。

用户在前端有选项，如果他选择选项 1，则验证器是请求如果他单击选项 2，则验证器不是请求。我的问题是在设置验证器时它已经在用户单击该字段之前显示，它应该只在用户触摸该字段时显示

if(option == 1) {
this.setRequiredVlidations();
}

enter image description here

initFormGroup() {
    this.modelForm = this.formBuilder.group({
      id: [this.model.id || 0],
      emailAddress: [this.model.emailAddress, Validators.required],
      firstName: this.model.firstName,
      roleId: this.model.roleId,
      lastName: this.model.lastName,
      phoneNumber: this.model.phoneNumber,
      companyName: this.model.companyName,
      ssocredentials: [this.model.ssocredentials || ""],
      accountId: this.accountId,
      title: this.model.title,
      isSso: [this.model.isSso || "",]
    });
  }

  setRequiredVlidations() {
    this.modelForm.get('firstName').setValidators(Validators.required)
    this.modelForm.get('lastName').setValidators(Validators.required)
    this.modelForm.get('companyName').setValidators(Validators.required)
  }

#html

 <mat-card-content>
                    <div fxLayout="row" fxLayoutAlign="space-between">
                        <div fxLayout="column" fxFlex="0 0 47%">
                            <mat-form-field class="full-width" appearance="fill" style="margin-top: 26px;">
                                <mat-label>First name</mat-label>
                                <input matInput formControlName="firstName">
                                <mat-error *ngIf="modelForm.get('firstName').hasError('required')" >
                                    First name is required.
                                </mat-error>
                            </mat-form-field>
                        </div>
                        <div fxLayout="column" fxFlex="0 0 47%">
                            <mat-form-field class="full-width" appearance="fill" style="margin-top: 26px;">
                                <mat-label>Last name</mat-label>
                                <input matInput formControlName="lastName">
                                <mat-error *ngIf="modelForm.get('lastName').hasError('required') && isExisting === false">
                                Last name is required.
                                </mat-error>
                            </mat-form-field>
                        </div>
                    </div>
                    <div fxLayout="row" fxLayoutAlign="start">
                        <div fxLayout="column" fxFlex="0 0 47%">
                            <mat-form-field class="full-width" appearance="fill" style="margin-top:20px;">
                                <mat-label>Phone Number</mat-label>
                                <input matInput formControlName="phoneNumber">
                            </mat-form-field>
                        </div>
                    </div>
                    <div fxLayout="row" fxLayoutAlign="space-between">
                        <div fxLayout="column" fxFlex="0 0 47%">
                            <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
                                <mat-label>Company Name</mat-label>
                                <input matInput formControlName="companyName">
                                <mat-error *ngIf="modelForm.get('companyName').hasError('required') && isExisting === false">
                                    Company Name is required.
                                </mat-error>
                                
                            </mat-form-field>
                        </div>
                        <div fxLayout="column" fxFlex="0 0 47%">
                            <mat-form-field class="full-width" appearance="fill" style="margin-top: 17px;">
                                <mat-label>Title</mat-label>
                                <input matInput formControlName="title">
                            </mat-form-field>
                        </div>
                    </div>
                </mat-card-content>

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

您可以检查输入是否被触摸或脏：

<mat-error *ngIf="modelForm.get('companyName').hasError('required') && isExisting === false && (modelForm.get('companyName').touched || modelForm.get('companyName').dirty)">
   Company Name is required.
 </mat-error>

【讨论】：

您好，先生。现在没有显示必需的消息，但该字段仍然是红色的，在用户触摸该字段之前将该字段突出显示为红色是否是一种好习惯？或者我们将删除红色并仅显示该字段是否触摸？谢谢。
imgur.com/a/OC4UUpx 先生，请检查这个，这是当前的
消息已经消失，但红线还在
不确定它是否相关，但在您的 setRequiredVlidations 方法中，最后，您应该添加 this.modelForm.updateValueAndValidity() 以便验证生效。如果您可以在 StackBlitz 上创建一个演示，我可以更好地查看
我已经添加了 this.modelForm.updateValueAndValidity() 但表单仍然是红色的

【解决方案2】：

您需要对单个表单控件而不是整个表单执行updateValueAndValidity。像这样的：

// Using forEach loop, you can reduce line of code as well. 

setRequiredVlidations() {
    const ctrls = ['firstName', 'lastName', 'companyName'];
    
    ctrls.forEach(eachCtrl => {
        const x = this.modelForm.get(eachCtrl);
        x.setValidators(Validators.required);
        x.updateValueAndValidity();
    });
}

【讨论】：