Question

我有一个带有反应性表单的Clarity向导，想知道如何设置表单的选项卡/焦点顺序，因为当在表单中的某些元素上时我的选项卡消失了，我也不知道为什么。

所以我想知道如何在代码中设置顺序？

我尝试将nativeElement.focus（）与@ViewChild方法一起使用，但这对我的问题没有帮助，该选项卡仍然消失。

该标签消失的元素的HTML

<clr-input-container>
       <label>Family Number</label>
       <input clrInput type="text" (blur)="ValidateEzcapMemb()" formControlName="ezcapmemb"
              required />
       <clr-control-error>{{this.errorMsgMemb}}</clr-control-error>
       <clr-control-helper style="color:rgb(4, 161, 70)">{{this.errorMsgMemb}}</clr-control-helper>
     </clr-input-container>
     <clr-input-container>
       <label>Depedent Code</label>
       <input clrInput type="text" (blur)="ValidateEzcapDep()"  formControlName="ezcapdepmemb"
              required />
       <clr-control-error>{{this.errorMsgDepMem}}</clr-control-error>
       <clr-control-helper style="color:rgb(4, 161, 70)">{{this.errorMsgDepMem}}</clr-control-helper>
     </clr-input-container>

模糊触发的方法

  ValidateEzcapMemb() {
    this.errorMsgMemb = 'Checking...';
    console.log("member no blur :" + this.cMasterForm.get('ezcapmemb').value);
    this._appService.ClaimCaptureService.currentClaimHeader.EZCAPMEMB = this.cMasterForm.get('ezcapmemb').value;
    this.errorMsgMemb = this.FieldValidation(this._appService.ClaimCaptureService.currentClaimHeader.EZCAPMEMB, 'ezcapmemb');
    if (this.errorMsgMemb === 'valid') {
      this.errorMsgMemb = this._appService.ClaimCaptureService.DataBaseCheckEzcapMemb();
      if (this.errorMsgMemb !== 'Family Number is incorrect') {
        this.cMasterForm.get('ezcapmemb').setErrors(null);
        if ((this.cMasterForm.get('ezcapdepmemb').value !== null) && (this.cMasterForm.get('ezcapdepmemb').value !== '')
          && (this.cMasterForm.get('ezcapdepmemb').value !== undefined)) {
          this.ValidateEzcapDep();
        }
      } else {
        this.cMasterForm.get('ezcapmemb').setErrors(this.errorMsgMemb);
      }
    } 
  }

  ValidateEzcapDep() {
    this._appService.ClaimCaptureService.currentClaimHeader.EZCAPMEMB = this.cMasterForm.get('ezcapmemb').value;
  this._appService.ClaimCaptureService.currentClaimHeader.membDepCode = this.cMasterForm.get('ezcapdepmemb').value;
   this._appService.ClaimCaptureService.currentClaimHeader.EZCAPMEMB = this._appService.ClaimCaptureService.currentClaimHeader.EZCAPMEMB + '-' + this._appService.ClaimCaptureService.currentClaimHeader.membDepCode;
    this.errorMsgDepMem = this.FieldValidation(this._appService.ClaimCaptureService.currentClaimHeader.EZCAPMEMB, 'ezcapdepmemb');
    if ((this.cMasterForm.get('ezcapmemb').value === '') || (this.cMasterForm.get('ezcapmemb').value === null)) {
      this.errorMsgDepMem = this._errorMsg['familyNumber'];
      this.cMasterForm.get('ezcapdepmemb').setErrors(this.errorMsgDepMem);
    } else {
      if (this.errorMsgDepMem === 'valid')
      this.errorMsgDepMem = this._appService.ClaimCaptureService.DataBaseCheckEzcapDepMemb();
      if (this.errorMsgDepMem !== 'Dependant Number is incorrect') {
        this.cMasterForm.get('ezcapdepmemb').setErrors(null);
      } else {
        this.cMasterForm.get('ezcapdepmemb').setErrors(this.errorMsgMemb);
      }
    }
  }

如何在ngOnInit（）方法中声明我的表单

    this.cMasterForm = this.fb.group({
      provclaim: ['', [Validators.required, Validators.maxLength(20)]],
      ezcapauth: ['', [Validators.maxLength(16)]],
      ezcapprov: ['', [Validators.required, Validators.maxLength(20)]],
      ezcapmemb: ['', [Validators.required, Validators.maxLength(20)]],
      ezcapdepmemb: ['', [Validators.required, Validators.maxLength(20)]],
      reprovider: ['', [Validators.maxLength(20)]],
      vendoid: [],
      PHC: [],
      PlaceSelect: [],
      CTOpt: [],
      HPCode: [],
      RecDateField: ['', Validators.required]
    });

当您到达“家庭号码”字段并按Tab键转到下一个字段时，该字段将成为从属代码字段，但是当您按Tab键时，它消失了。

以下是该向导外观的可视化示例 （我在选项卡消失的地方用绿色标记了两个字段）

如何以角形反应形式设置选项卡/焦点顺序

0 个答案: