如何在按钮单击时显示验证消息？

Posted 2023-03-13

【中文标题】如何在按钮单击时显示验证消息？

【英文标题】：how to show validation message on button click?

【发布时间】：2019-01-30 15:29:54

【问题描述】：

您能告诉我如何在单击按钮时显示验证消息吗？这是我的代码 https://stackblitz.com/edit/angular-ugdbvg?file=src/app/app.component.html

我想在用户按下submit 按钮时显示required 错误消息。

  <form novalidate [formGroup]="searchForm" class="calform">
      <section class="col-sm-6 bg-white  pl-20 pr-20">

      <div class="form-group col-sm-4 pl-0 error">
          <label class="field-title mb-5">name<span class="color-red fontWt">&nbsp;*</span></label>
          <input type="text" placeholder="Enter name" formControlName="name">
          <p class="message" [hidden]="searchForm.get('name')">Required</p>
        </div>

        <div class="form-group col-sm-4 pl-0 error">
          <label class="field-title mb-5">last name <span class="color-red fontWt">&nbsp;*</span></label>
          <input type="text" placeholder="Enter last name" formControlName="lastName">
          <p class="message" [hidden]="searchForm.get('lastName')">Required</p>
        </div>
        <button (click)="submitHandler()">submit</button>
      </section>
    </form>

js

this.searchForm = this.fb.group(
      name: ['', Validators.required],
          lastName: ['', Validators.required]

    );

【参考方案1】：

试试这样：

使用[hidden] 或*ngIf

DEMO

<div class="form-group col-sm-4 pl-0 error">
            <label class="field-title mb-5">name<span class="color-red fontWt">&nbsp;*</span></label> show
            <input type="text" placeholder="Enter name" formControlName="name"> searchForm.get('name').invalid
            <p class="message" [hidden]="!(show && searchForm.get('name').invalid)">Required</p>
        </div>

        <div class="form-group col-sm-4 pl-0 error">
            <label class="field-title mb-5">last name <span class="color-red fontWt">&nbsp;*</span></label>
            <input type="text" placeholder="Enter last name" formControlName="lastName">
            <p class="message" [hidden]="!(show && searchForm.get('lastName').invalid)">Required</p>
        </div>

        <button (click)="show = true ; submitHandler();">submit</button>
    </section>
</form>

【参考方案2】：

添加以下行进行检查：

<span class="error" *ngIf="!!searchForm.controls.name.errors.required && (!!searchForm.controls.name.dirty || !!searchForm.controls.name.touched)">
    Name is required.
</span> 
<span class="error" *ngIf="!!searchForm.controls.lastName.errors.required && (!!searchForm.controls.lastName.dirty || !!searchForm.controls.name.touched)">
    lastName is required.
</span>

在你的 ts 文件中：

submitHandler() 
    if(this.searchForm.valid) 
        // Logic
    

https://stackblitz.com/edit/angular-utvw23

【参考方案3】：

您需要使用 *ngIf。更新了 Stackblitz 代码。 https://stackblitz.com/edit/angular-fzyrji

【讨论】：

用 ngif 这是不可能的

因为 ngif 删除并添加 dom ，我不想删除元素。只隐藏和显示

Ok 使用 [hidden] 属性绑定更新了 stackblitz。