Angular - динамически добавлять набор полей при нажатии на вкладку

Question

Я работаю в Angular 7. В настоящее время выполняется:

Пользователь может ввести количество (1,2,3 и т. Д.), И количество динамических полей будет упорядочено по количеству.

Чего я хочу добиться, так это удалить поле количества и получить 1 набор полей по умолчанию, а также когда поле начинает заполняться, когда пользователь находится в последнем поле и нажимает «кнопку вкладки» на следующемнабор динамических полей генерируется автоматически.

Например:

В настоящее время выполняется:

Цвет: _______

Форма: _______

Ввод количества: 1

// Набор полей повторяется 1 раз.

Цвет: _______

Форма: _______

Чего я хочу добиться:

Цвет: _______

Форма: _______ // Когда я нажимаю кнопку «Tab», когда мой ввод фокусируетсяПо форме автоматически создается новый набор полей.

Мой файл componentenent.ts:

 public myForm: FormGroup;
  constructor(private _fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = this._fb.group({
      FrontEnd: ['',],
      languages: this._fb.array([
          this.initlanguage(),
      ])
  });
  }

   initlanguage() {
        return this._fb.group({
            color: [''],
            shape: ['']
        });
    }

    qty:number;
    newqty:number;
    addLanguage() {
      for(this.qty=0;this.qty<this.newqty;this.qty++){
      const control = <FormArray>this.myForm.controls['languages'];
      control.push(this.initlanguage());
      }
  }

  removeLanguage(i: number) {
      const control = <FormArray>this.myForm.controls['languages'];
      control.removeAt(i);
  }

Мой файл component.html:

        <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
          <div formArrayName="languages">
            <div *ngFor="let language of myForm.controls.languages.controls; let i=index" class="panel panel-default">
              <div class="panel-heading">
                <span class="nc-mobile pull-right" *ngIf="myForm.controls.languages.controls.length > 1" (click)="removeLanguage(i)"></span>
              </div>
              <div class="panel-body" [formGroupName]="i">
                <div class="form-group col-xs-6">
                  <label>Color</label>
                  <input type="text" class="form-control" formControlName="color">
                </div>
                <div class="form-group col-xs-6">
                  <label>Shape</label>
                  <input type="text" class="form-control" formControlName="shape">
                </div>
              </div>
            </div>
          </div>
      <input placeholder="Enter Quantity here" [(ngModel)]="newqty"/> 

          <div class="margin-20">
            <a (click)="addLanguage()" style="cursor: default">
              Add another Fieldset +
            </a>
          </div>

          <div class="margin-20">
            <button type="submit" class="btn btn-primary pull-right" [disabled]="!myForm.valid">Submit</button>
          </div>
        </form>

Сводка: создание динамического набора полей, когда пользователь нажимает вкладку в последнем выбранном поле ввода.