几乎每个web应用程序都使用表单，Angular为我们提供了几个内置的验证器。然而，在实践中，为了满足项目需求，我们经常需要向应用程序添加一些自定义的验证函数。

角度内置验证器

必输项-表单控制值不为空email-表单控制值格式为email min length-表单控制值最小长度maxlength-表单控制值最大长度pattern-表单控制值需要匹配pattern对应的pattern(正则表达式)要求：设置分数比例时，如果总比例不是100%，则无法验证。

分析：需求非常简单，只需要编写一个验证器。因为不需要访问后台，验证器与三个字段相关，所以是同步跨字段验证。

实现验证器

首先，去官网找样本代码：

导出const identity vealedvalidator : ValidatorFn=(control : FormGroup): ValidationErrors | null={ const name=control . get(' name ')；const Alterego=control . get(' Alterego ')；返回名称alterEgo name . value===alterEgo . value？{ ' identityvealed ' : true } : null；};解释：这个验证器实现了ValidatorFn接口。它接收一个Angular表单控件对象作为参数，当表单有效时返回一个null，否则返回一个ValidationErrors对象。

从上面可以看出，所谓跨域，即从验证单个formControl formControl到验证整个表单formGroup，而formGroup的每个域都是formControl。

理解这个原则，也就是根据需要重写：

//判断总比例是否等于100导出const score八sum验证器：验证器fn=(表单组：表单组):验证错误| null={ const sum legal=formgroup . get(' final score weight ')。value FOrmGrouP . get(' middleScarweight ')。value FOrmGrouP . get(' UsalCoreWatch ')。value===100//如果是，返回空值；否则，返回ValidationErrors对象。返回sumLegal？null : { ' score weightsum ' : true }；};至此，验证者已经完成了编写。

添加到响应表单

要将验证程序添加到要验证的表单组中，必须在创建新的验证程序时将其传递给第二个参数。

ngOnInit(): void { this . score settinggedfrom=this . FB . group({ final score weight :[null，[Validators.required，scoreWeightValidator]]，fullScore: [null，[Validators.required]，middleScoreWeight: [null，[Validators.required，scoreWeightValidator]]，name: [null，[Validators.required]，priority: [null，]}添加错误消息

我使用ng-zorro框架，当输入所有三个分数时，它会触发验证

NZ-form-item NZ-row NZ-form-control nzValidateStatus=' error ' nzSpan=' 12 ' nzOffset=' 6 ' NZ-form-explain * Ngif=' score settingAddFrom . errors？得分八和得分设置addfrom。get(' middle score 8 ')。脏分数设置addfrom。get(' final score 8 ')。脏分数设置addfrom。get('通常得分为八')。' dirty '必须等于100%！/NZ-表单-解释/NZ-表单-控制/NZ-表单-项目效果：

摘要

一般来说，实现这个验证器并不难，就是阅读官方文档，根据自己的需要重写。

参考文件：角形验证跨域验证

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。