VM Ware 명확성 디자인 양식 사용자 정의 유효성 검사가 표시되지 않거나 오류 클래스를 지 웁니다.

debugcn 에 게시 Dev

지 테쉬 찬드라

명확성과 각도의 최신 버전을 사용하여 내 양식에 대한 사용자 정의 유효성 검사를 얻으려고하지만 성공적인 유효성 검사 또는 실패 후이 사용자 지정 오류에 대한 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

내가 어디로 잘못 가고 있니?

Yurzui

여기서 두 가지 실수를 저질렀습니다.

동기화 유효성 검사기 대신 비동기 유효성 검사기를 배치합니다.

올바른 초기화는 다음과 같습니다.

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

비동기 유효성 검사기 내에서 구독하지 말고 rxjs 연산자 pipe와 함께 map사용해야합니다. 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 자부터 시작하면 실패합니다.

참고 : 유효성 검사는 포커스 아웃에서만 발생합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사