VMWare清晰度设计表单自定义验证不显示或清除错误class

Question

我正在尝试使用最新版本的清晰度和 angular 为我的表单获取自定义验证，但在验证成功或失败后，此自定义错误的 clr-control-error 不会显示在Ui ，调用确实被触发并验证但也不会在有效场景中删除 .clr-error 但将文本框保留为红色并且也不会删除感叹号圈，它非常类似于

// my component where i am using it 
constructor( private dataService:DataService,private fb: FormBuilder,private sm:FormValidationClass) {
     

      this.step1Form = new FormGroup({
        csiAppId: new FormControl(null, {
          validators: [Validators.required, sm.csiAppIdValidator('csiAppId')],
          updateOn: 'blur'
        }),
        env: new FormControl(null, {
          validators: [Validators.required]
        }),
        appInstanceIdentifier: new FormControl(null, {
          validators: [Validators.required]
        }),
        SNOWappInstanceIdentifier: new FormControl(null, {
          validators: [Validators.required]
        }),
        sltnNumber: new FormControl(null, {
          validators: [Validators.required]
        }),
      });

    }
    
    
    //my validator where i try to call a rest service 
    @Injectable({ providedIn: 'root' })
export class FormValidationClass implements OnInit {

  appIdValuator : string= 'true';

  constructor(public httpClient: HttpClient,private dataService:DataService) {

  }

  ngOnInit(): void {
  }

  csiAppIdValidator(csiAppId: string): ValidatorFn {
    return (control: FormControl) => {
      if(!control){
        return null;
      }

    return this.httpClient.get("/wscrp/cloudvcac/services/rest/validateAppId/"+control.value)
    .subscribe(
        (result : any)=>{
          console.log(">>>"+result.status);
      if( result.status == "Success"){
        alert("valid");
        return  null;
      } else {
        alert("invalid");
        return {invalidAppId : true}
      }
    }
  );
    // return null
    };
  }
}

<form clrForm [formGroup]="step1Form" >
            <div id='one22'>
            <clr-input-container >
                <label class="clr-col-2">CSI AppID</label>
                <input class="clr-col-8" clrInput  formControlName='csiAppId' />
              
                <clr-control-error *clrIfError="'required'">CSI App ID is required!</clr-control-error>
                <clr-control-error *clrIfError="'invalidAppId'">Csi AppID is Invalid!</clr-control-error>
                <!-- <span *clrIfError="'invalidAppId'">dsdsdsdsdsdd</span> -->
            </clr-input-container>
        </div>
        </form>

..我的html

我哪里错了我简直要疯了

Answer 1

你在这里犯了两个错误：

用异步验证器代替同步验证器。

正确的初始化如下：

csiAppId: new FormControl(null, {
   validators: [Validators.required],
   asyncValidators: [sm.csiAppIdValidator('csiAppId')], <--- async validators go here
   updateOn: 'blur'
}),

你不应该在异步验证器中订阅，而是使用 pipe 和 map rxjs 运算符。 Angular 将自动订阅。

下面是异步方法的正确实现：

csiAppIdValidator(csiAppId: string): AsyncValidatorFn {
  return (control: FormControl): Observable<ValidationErrors | null> => {
    if (!control) {
      return null;
    }

    return this.httpClient.get('/wscrp/cloudvcac/services/rest/validateAppId/' + control.value)
      .pipe(map((result: any) => result.status === 'Success' ? null : { invalidAppId: true }));
  };
}

请尝试一下这个 Stackblitz Example，我通过提供简单的 Observable 来模拟 http 请求。您可以在 AppID 字段中输入内容，它应该从 4 个字母开始失败。

注意： 验证只发生在 focusout

VMWare清晰度设计表单自定义验证不显示或清除错误class

VM Ware clarity design form custom validation does not show up or clear the error class

angular

vmware-clarity