Angular中的验证条件问题 _编程开发

创始人

2024-10-31 11:31:13

0次

在 Angular 中，我们可以使用 Form 去创建表单并进行验证。但是在进行验证时需要设置一些验证条件，例如必填、最小值、最大值等等。下面给出一个示例，展示如何对一个 input 标签进行必填验证。

首先，我们需要在表单上定义一个名为 form 的 ngForm 指令。然后，在 input 标签上定义一个名为 ngModel 的指令，并设置其为必填的条件。最后，我们可以在 input 标签后面放置一个错误提示标签，以便用户在未填写内容时可以看到相应的错误提示。


  
  
    Name is required.

第一行设置了一个名为 form 的 ngForm 指令，用于表单的定义和管理。
第二行设置了一个名为 ngModel 的指令，该指令指定了 input 标签所绑定的数据模型，并通过 required 条件将其设置为必填。
第三行定义了一个错误提示标签，并使用了指令 *ngIf 来控制其是否显示，这里的条件为：如果 name 的控件状态为无效，且控件的状态发生了变化（dirty）或已触摸（touched），就会显示该错误提示。
最后一个 div 标签包含了一个内部的 *ngIf 语句，用于判断 name 是否为必填，并显示相应的错误提示信息。

这就是如何在 Angular 中设置验证条件的方法，如果有多个验证条件，可以按照相似的方式添加即可。