Question

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

构建方式：角度7，Clarity

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

字段1：名称
字段2：URL
字段3：日期

按钮就像：

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

情况1：当按下Submit按钮时，请验证完整的表格。而且工作正常。

情况2：在Verify上命中时。仅验证字段1和2。我不知道该怎么做？

请提供帮助...该代码示例摘自Clarity form page。

谢谢

UPDATE ：

表单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并查看是否存在错误来做到这一点。听起来您有两个问题。

如何在提交/验证时强行验证错误？
如何制定自定义验证程序规则？

对于第一个问题，只有在触摸控件后，控件才会通过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。 / p>

如果您在项目中有此功能，只需在输入中添加phone属性即可添加验证器，Angular（和Clarity）会意识到这一点。然后，您可以这样编写自定义错误消息：

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

如果您想获取一般性错误消息，请忽略clrIfError指令，它将显示 any 错误。

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

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

1 个答案: