如何在单击按钮时动态获取文本框，然后使用角度6将新的文本框置于该特定区域下方？

Question

.component.html

 <div class="row">
        <article class="col-xs-6 col-sm-6 col-md-6 col-lg-12">
            <header>
              <h2>Person Details</h2>
            </header>
            <form #formRef="ngForm">
                  <div *ngFor="let detail of details; let in=index" class="col-sm-4">
                      <div class="form-group">
                        <input type="text" [(ngModel)]="details[in].value" name="name{{in}}" class="form-control" #name="ngModel" />
                        <button (click)="add()">+</button>
                      </div>
                      <br />
                  </div>
                  <button class="primary" type="submit">Save</button>
                </form>
        </article>
    </div>

.component.ts：

 details = [{value: 'Name'}, {value: 'Address'}, {value: 'Phone'}];

 add() {
    this.details.push({value: ''});
  }}

我在文本框中得到如下输出：

Name +
Address +
Phone +

当我单击加号时，将在最后一个文本框下创建一个新文本框。但是我想在其下方创建相应的文本框。

如何实现一个新的文本框将在相应的文本框的下面，它不会最终生成。

我无法找到解决方案。请帮助我某人