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

Question

有没有办法根据要求验证部分表格？

搭建：Angular 7，Clarity

实际上，我有一个形式clrForm与一些字段和两个按钮。字段如下：

• 领域1：名称
• 字段2：URL
• 领域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()（pre 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>而不是抓取对表单的引用并手动调用提交事件。