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

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

部分代码如下：

ts:this.detailForm = this.fb.group({dataSourceParamName: [null, [Validators.required, Validators.maxLength(40)] ], //minLength maxLengthdescription: [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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！