特定字段的清晰度自定义验证

Question

有什么方法可以根据需求验证部分表单吗？

构建： 角 7，Clarity

实际上，我有一个表单clrForm，其中包含一些字段和两个按钮。 字段如下：

• 字段 1：名称
• 字段 2：网址
• 字段 3：日期

按钮如下：

• 按钮 1：验证
• 按钮 2：提交

案例 1：点击Submit 按钮时，验证完整的表单。而且运行良好。

案例2：点击Verify。仅验证字段 1 和 2。我不知道该怎么做？

请帮忙看看怎么做...代码示例取自Clarity form page。

谢谢

更新：

表单 HTML

<form class="clr-form clr-form-compact" clrForm #submitData="ngForm" (ngSubmit)="submitProfileData(submitData)">
    <clr-input-container >
        <label for="forname" class="clr-control-label required">Name</label>
        <input clrInput type="text" class="clr-input" [(ngModel)]="formData.name" name="lblName" #lblName="ngModel" id="forname" maxlength="50" placeholder="Name" required>
        <clr-control-error class="clr-col-12 clr-col-md-8" *clrIfError="'required'">Name is required.</clr-control-error>
    </clr-input-container>

    <clr-input-container >
        <label for="url" class="clr-control-label clr-col-12 clr-col-md-4 required">URL</label>
        <input clrInput type="text" class="clr-input" [(ngModel)]="formData.url" name="lblUrl" #lblUrl="ngModel" id="url" placeholder="URL" [pattern]="SOME_URL_PATTERN" required>
        <clr-control-error class="clr-col-12 clr-col-md-8" *clrIfError="'required'">URL is reqyured.</clr-control-error>
        <clr-control-error class="clr-col-12 clr-col-md-8" *clrIfError="'pattern'" >Invalid URL given.</clr-control-error>
    </clr-input-container>

    <div class="clr-col-lg-12 clr-col-md-12 clr-col-12 text-right py-1 pr-0">
        <div class="btn btn-primary" (click)="verifyTenantData()">Verify</div><!-- HERE I DON'T KNOW HOW TO VALIDATE PARTIAL FORM-->
    </div>

    <clr-date-container>
        <label for="startdate" class="clr-control-label clr-col-12 required">Date</label>
        <input type="date" id="startdate" [(ngModel)]="formData.startDate" name="lblStartDt" #lblStartDt="ngModel" placeholder="Date" [(clrDate)]="formData.isoStartDate" required>
        <clr-control-error class="clr-col-12 clr-col-md-8" *clrIfError="'required'">Date is require</clr-control-error>
    </clr-date-container>
<form>
<div class="clr-row ">
    <div class="clr-col-lg-12 text-center my-2">
        <button type="button" class="btn btn-primary" (click)="submitData.ngSubmit.emit()">Submit</button>
    </div>
</div>

组件

submitData(submitData) {
    if (submitData.valid) {
       //SUBMIT DATA CODE
    } else {
        this.clrForm.markAsDirty();
    }
}

Answer 1

清晰度取决于 Angular 的表单验证（与响应式和模板驱动一起使用）来确定控件何时无效。它通过检查 NgControl 并查看是否有错误来做到这一点。听起来您有两个问题。

1. 如何在提交/验证时强制出现验证错误？
2. 如何制定自定义验证器规则？

对于第一个问题，控件仅在被触摸后由 Clarity 验证，以避免过早显示错误。如果您想强制验证，那么您将使用ClrForm.markAsDirty()（2.0 之前）或ClrForm.markAsTouched()（2.0+）API。这基本上会触发所有表单控件立即验证并显示任何错误。

在模板驱动的表单中，您需要在控制器中获取对表单的引用。

@ViewChild(ClrForm) form: ClrForm;

然后您可以在您的验证按钮处理程序中调用该方法。不要提交表单。

validate() {
  this.form.markAsDirty(); // 1.0
  //this.form.markAsTouched(); // 2.0+
}

对于第二个问题，Angular forms validation documentation 很好地涵盖了它，我还建议从我的 NgModel 的 phone number validator 指令一书中查看这个示例，该指令依赖于 validator function。

如果您的项目中有此功能，您只需将 phone 属性添加到您的输入以添加验证器，Angular（和 Clarity）就会知道它。然后你可以像这样编写自定义错误消息：

<clr-control-error *clrIfError="'phone'">Not a valid phone number</clr-control-error>

如果您想要一般错误消息，请不要使用 clrIfError 指令，它将显示 任何 错误。

最后，您的提交按钮可以只是<button type="submit" class="btn btn-primary">Submit</button>，而不是获取对表单的引用并手动调用提交事件。