Как реализовать такую ​​функцию, как Заполнить поля в том же порядке, что и в html, при динамически отображаемой угловой форме?

Question

Я реализовал форму Angular Reactive, которая будет создана во время выполнения из JSON, в котором есть данные полей. И он успешно создает форму и отображает ее в формате html, а после отправки я получаю полное значение формы.

Только одно статическое поле находится вверху формы. Я поделилсякод ниже.

TS

formGroup: FormGroup = new FormGroup({});

ngOnInit() {
  this.formGroup.addControl('editType', new FormControl(2, Validators.required));
  this.createFormGroup(this.fields);
}

createFormGroup(fields) {
  fields.forEach(field => {
    const key = field.fieldName;
    const control = new FormControl({value: null, disabled: true});
    this.formGroup.addControl(key, control);
    const formControl = this.formGroup.controls[key];
    const validators = [];
    validators.push(Validators.required);
    formControl.setValidators(validators);
    formControl.updateValueAndValidity();
  });
}

onKeyDown(field, e) {
  if (e.event.key === 'Tab' || e.event.key === 'Enter') {
    this.onDataEntry(field, e);
  }
}

onDataEntry(field, { event }) {
  let value = event.target.value;
  this.dataValidationService.checkValid(field, value)
  .subscribe((response) => {
    if (response.isSuccess) {
      delete this.error[field.fieldName];
      delete this.errorMessage[field.fieldName];

      // Here I have to write code to get the next field and enable it and set focus on it

    } else {
      this.errorMessage[field.fieldName] = response.message;
      this.error[field.fieldName] = true;

      // Here I have to stop moving to the next field and set focus on the same field

    }
  });
}

HTML

<form [formGroup]="formGroup" #addForm id="addForm">
  <div class="form-group row mt-2">
    <label class="col-sm-5 col-form-label">Edit Type :</label>
    <div class="col-sm-7">
      <dx-select-box
        [dataSource]="editTypes"
        displayExpr="label"
        valueExpr="value"
        formControlName="editType"
        (onInitialized)="setFocus($event)"
      ></dx-select-box>
    </div>
  </div>
  <div
    class="form-group row mt-2"
    *ngFor="let field of fields | sortBy: 'seq'; let i = index" 
  >
    <label class="col-sm-5 col-form-label">{{ field.display || field.fieldName }} :</label>
    <div class="col-sm-7" *ngIf="field.fieldType === 'VarChar'">
      <dx-text-box 
        [formControlName]="field.fieldName"
        (onKeyDown)="onKeyDown(field, $event)">
      </dx-text-box>
      <span class="error-msg" *ngIf="error[field.fieldName]">{{errorMessage[field.fieldName]}}</span>
    </div>
    <div

      class="col-sm-7"
      *ngIf="field.fieldType === 'INT' || field.fieldType === 'Decimal'"
    >
      <dx-number-box
        [formControlName]="field.fieldName"
        (onKeyDown)="onKeyDown(field, $event)">
      </dx-number-box>
      <span class="error-msg" *ngIf="error[field.fieldName]">{{errorMessage[field.fieldName]}}</span>
    </div>
    <div class="col-sm-7" *ngIf="field.fieldType === 'DateTime'">
      <dx-date-box
        width="100%"
        [formControlName]="field.fieldName"
        type="datetime"
        (onKeyDown)="onKeyDown(field, $event)"
      ></dx-date-box>
      <span class="error-msg" *ngIf="error[field.fieldName]">{{errorMessage[field.fieldName]}}</span>
    </div>
  </div>
</form>

Я предоставляю форму, основанную на seqNo , который находится в данных JSON. А теперь я хочу реализовать такую ​​функцию, как « Пользователь должен заполнять поля формы одно за другим в том же порядке, в котором я их отобразил », и в каждой функции размытия каждого поля есть APIвызов для проверки поля, и на основе ответа этого вызова API я должен переместить курсор в следующее поле (если проверка пройдена) или в то же поле (если проверка не пройдена).

Пользователь должен нажать клавишу Tab или Введите для перехода к следующему полю.

Пользователю не должно быть позволено перемещать какие-либо другие поля перед заполнением предыдущих полей и проходить проверку. Я отключил все остальные поля и сфокусировал первое статическое поле, используя ElementRef .

И на каждой пройденной проверке поля, как получить экземпляр следующего поля, чтобы включить его или программно сфокусироватьполе?

А на каждой неудачной проверке поля, как сделать фокус на том же поле?