Angular 角度-在按tab键时动态添加一组字段

我在7号楼工作。 目前正在做的是,

用户可以输入数量（1、2、3等），动态字段的数量将按数量排列

我想要实现的是删除数量字段，默认情况下获得一组字段，当用户位于最后一个字段并按下“tab按钮”时，该字段开始归档，自动生成下一组动态字段。

例如：

当前正在执行的操作：

颜色：_______

形状：_______

输入数量：1

//字段集重复1次

颜色：_______

形状：_______

我想要实现的目标：

颜色：_______

形状：\当我按“tab按钮”时，当我的输入集中在形状上时，会自动生成一组新字段

My componenent.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);
  }

公共myForm:FormGroup；
构造函数（私有_fb:FormBuilder）{}
恩戈尼尼特（）{
this.myForm=this.\u fb.group({
前端：[''，]，
语言：this.\u fb.array([
this.initlanguage（），
])
});
}
initlanguage（）{
将此返回。\u fb.group({
颜色：['']，
形状：['']
});
}
数量：数量；
新增数量：编号；
addLanguage（）{
对于（此数量=0；此数量
颜色
形状
添加另一个字段集+
提交

总结：

---

当用户在最后选择的输入字段上按tab键时，生成动态字段集。

根据内存，我应该使用keydown事件：

，在自定义方法中，您可以执行所需操作。根据内存，我应该使用keydown事件：

，在自定义方法中，您可以执行所需操作。

        <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>