VM Ware 清晰度设计表单自定义验证不显示或清除错误类

Question

我正在尝试使用最新版本的清晰度和角度为我的表单获取自定义验证，但在成功验证或失败后，此自定义错误的 clr 控件错误不会显示在 UI 上，调用确实被触发并且它会验证，但在有效情况下也不会删除 .clr 错误，但将文本框保留为红色并且也不会删除感叹号圆圈， 它与

这个问题

// 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>

....我的网页

我哪里出错了，我只是发疯

了

Answer 1

你在这里犯了两个错误：

• 将异步验证器代替同步验证器。

下面是正确的初始化：

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

• 您不应该在异步验证器中订阅，而应该将pipe与maprxjs运算符一起使用。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 示例，我通过提供简单的可观察性来模拟 http 请求。您可以在AppID字段中输入内容，它应该从 4 个字母开始失败。

注意：验证仅在聚焦时进行