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