angular 实现同步验证器跨字段验证

栏目: 编程语言 · AngularJS · 发布时间: 5年前

内容简介:需求:设置成绩占比时,如果总占比不是100%,则无法通过验证。分析:需求很简单,只需要写一个验证器即可,由于不需要访问后台,且验证器与三个字段有关,所以是同步跨字段验证。

需求:设置成绩占比时,如果总占比不是100%,则无法通过验证。

angular 实现同步验证器跨字段验证

分析:需求很简单,只需要写一个验证器即可,由于不需要访问后台,且验证器与三个字段有关,所以是同步跨字段验证。

实现验证器

首先,去官网上找示例代码:

export const identityRevealedValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
  const name = control.get('name');
  const alterEgo = control.get('alterEgo');

  return name && alterEgo && name.value === alterEgo.value ? { 'identityRevealed': true } : null;
};

解释:这个身份验证器实现了 ValidatorFn 接口。它接收一个 Angular 表单控件对象作为参数,当表单有效时,它返回一个 null,否则返回 ValidationErrors 对象。

从上可知,所谓跨字段,就是从验证表单单个控件formControl变成了验证整个表单formGroup了,而formGroup的每个字段就是formControl。

angular 实现同步验证器跨字段验证

明白了这个原理,就是根据需求进行改写:

// 判断总占比是否等于100
    export const scoreWeightSumValidator: ValidatorFn = (formGroup: FormGroup): ValidationErrors | null => {
    const sumLegal = formGroup.get('finalScoreWeight')
        .value + formGroup.get('middleScoreWeight')
        .value + formGroup.get('usualScoreWeight')
        .value === 100;
        // 如果是,返回一个 null,否则返回 ValidationErrors 对象。
    return sumLegal ? null : {'scoreWeightSum': true};
};

到此,验证器已经写完。

添加到响应式表单

给要验证的 FormGroup 添加验证器,就要在创建时把一个新的验证器传给它的第二个参数。

ngOnInit(): void {
    this.scoreSettingAddFrom = this.fb.group({
        finalScoreWeight: [null, [Validators.required, scoreWeightValidator]],
        fullScore: [null, [Validators.required]],
        middleScoreWeight: [null, [Validators.required, scoreWeightValidator]],
        name: [null, [Validators.required]],
        passScore: [null, [Validators.required]],
        priority: [null, [Validators.required]],
        usualScoreWeight: [null, [Validators.required, scoreWeightValidator]],
    }, {validators: scoreWeightSumValidator});
}

添加错误提示信息

我使用的是ng-zorro框架,当三个成绩占比均输入时,触发验证

<nz-form-item nz-row>
    <nz-form-control nzValidateStatus="error" nzSpan="12" nzOffset="6">
        <nz-form-explain
            *ngIf="scoreSettingAddFrom.errors?.scoreWeightSum &&
             scoreSettingAddFrom.get('middleScoreWeight').dirty &&
             scoreSettingAddFrom.get('finalScoreWeight').dirty &&
             scoreSettingAddFrom.get('usualScoreWeight').dirty">成绩总占比需等于100%!
        </nz-form-explain>
    </nz-form-control>
</nz-form-item>

效果:

angular 实现同步验证器跨字段验证

总结

总的来说这个验证器实现起来不算很难,就是读懂官方文档,然后根据自己的需求进行改写。

参考文档: angular表单验证 跨字段验证


以上所述就是小编给大家介绍的《angular 实现同步验证器跨字段验证》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

新媒体营销概论

新媒体营销概论

秋叶、刘勇 / 人民邮电出版社 / 2016-12-1 / 36.00

本书共分6章。第1章重点介绍了新媒体的概念和特征,引导读者全面认识新媒体所处的行业;第2章用历史发展的眼光,介绍了不同类型的新媒体,让读者不仅能看到最新的新媒体模式,也能看到这个模式发展背后的脉络;第3章重点介绍了新媒体广告投放载体,便于读者选择适合自己的新媒体运营方式;第4章介绍了新媒体运营的策划思维;第5章介绍了新媒体舆情管理知识;第6章选取了可口可乐、海底捞、恒大冰泉等的新媒体助力传统行业转......一起来看看 《新媒体营销概论》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换