angular 表单FormGroup笔记

一、校验

1、校验提示

<nz-form-item>
          <nz-form-label>手机号码</nz-form-label>
          <nz-form-control [nzErrorTip]="mobileTemplate">
            <input nz-input formControlName="mobile" placeholder="请输入" />
            <ng-template #mobileTemplate let-control>
              <ng-container *ngIf="control.hasError('pattern')">请输入正确的手机号码格式</ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>

2、自定义提示

自定义一个error,根据这个自定义error做相应的警示语

a、建表单,建表单时添加自定义xxerror,这个xxerror可通过formcontrol的hasError('xxerror')取到

//ts文件


  numberRangeValidator(control: FormControl) {
    // 进行自定义校验逻辑 (0,100]范围的数值
    if (control.value <= 0 || control.value > 100) {
      return { numRangeError: true }; //numRangeError这个就是自定义的error的名称,在html里可以用control.hasError('numRangeError')取,校验不通过返回true,通过返回false
    } else {
      return null;
    }
  }

  myForm: FormGroup = this.utfb.group({
    num: [undefined, [Validators.required, this.numberRangeValidator]]
  });

 这里的this.utfb是import { UntypedFormBuilder } from '@angular/forms';

在构造函数里注入即可:

constructor(

private utfb: UntypedFormBuilder

) {

super();

}

b、添加警示语

//html文件


    <form nz-form [formGroup]="myForm">
      <nz-form-item nzFlex>
        <nz-form-label nzFor="" nzSpan="1-24" nzRequired>成绩</nz-form-label>
        <nz-form-control nzSpan="1-24" [nzErrorTip]="errorTip">
          <input nz-input type="number" formControlName="num" />
          <ng-template #errorTip let-control>
            <ng-container *ngIf="control.hasError('required')">必填项!</ng-container>
            <ng-container *ngIf="control.hasError('numRangeError') && !control.hasError('required')"
              >请输入(0,100]的数字!</ng-container
            >
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </form>

效果:

必填校验

自定义的校验(0,100]

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值