angular 动态响应式表单中 ,自定义表单输入校验并提示对应信息

angular :动态响应式表单中 自定义表单输入校验并提示对应信息

部分代码如下:

ts:
 this.detailForm = this.fb.group({
      
        dataSourceParamName: [null, [Validators.required, Validators.maxLength(40)] ], //minLength maxLength
        description: [null, Validators.maxLength(200) ],
        dutyDepartmentParamList: [null, [Validators.required]],
        relatedTaskFlag: [true]});
  
get dataSourceParamName() { return this.detailForm.get('dataSourceParamName')}
get description() { return this.detailForm.get('description') }

html:
<nz-form-item *ngIf="detailItem.dataSourceType === 'THIRD'">
          <nz-form-label [nzSpan]="8" nzFor="dataSourceParamName" nzRequired>{{'节点字段名称'}}</nz-form-label>
          <nz-form-control [nzSpan]="14" nzErrorTip="{{dataSourceParamNameErrors}}">
              <input nz-input id="dataSourceParamName" formControlName="dataSourceParamName"
                  [(ngModel)]="detailItem.dataSourceParamName">

                  <div *ngIf="dataSourceParamName.invalid && (dataSourceParamName.dirty || dataSourceParamName.touched)"
                  class="alert alert-danger">
                  <div *ngIf="dataSourceParamName.errors?.['required']">
                    Field Required
                  </div>
                  <div *ngIf="dataSourceParamName.errors?.['maxlength']">
                    请输入节点字段名称40字符以内
                  </div>

                  </div>
          </nz-form-control>
      </nz-form-item>

ps:
动态添加控件可能会导致验证失效,添加控件之前已经进行了表格验证,但添加控件之后,表格验证证明并没有重新进行。
了解决这个问题,你可以手动调整使用updateValueAndValidity()方法来更新表单验证,以确保验证器的有效性。在添加或删除控件之后,你可以对应的分支中调使用该方法,例如:

if (data === 'THIRD') {
  this.detailForm.addControl('dataSourceParamName', this.fb.control(null, Validators.maxLength(40)));
  this.detailForm.get('dataSourceParamName').updateValueAndValidity();
} else {
  this.detailForm.removeControl('dataSourceParamName');
}

自定义校验参考官网:https://angular.cn/guide/form-validation#adding-custom-validators-to-reactive-forms
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值