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

Question

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

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

我曾尝试将 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]
    });

当您到达 Family Number 字段并按 Tab 键转到下一个字段时，该字段将是从属代码字段，但当您按 Tab 时，选项卡不会消失。

这是向导外观的可视化示例 （我将选项卡消失的两个字段标记为绿色）

标签： angulartypescript.net-corevmware-clarity