无法在Angular4中创建动态输入？

Question

我有一个表格，其中的数据是通过api填充的。我有一个“添加行”按钮，我希望当用户单击“添加行”按钮时，在td之一中具有输入的行应附加在底部，并且还希望在该动态创建的输入控件上绑定formControlName。我已经尝试过一个教程。我正在使用反应形式。

这是我的组件。

addRoomsForm: FormGroup;
this.addRoomsForm = new FormGroup({
  rooms: new FormArray([])
})

insertRow() {
(<FormArray>this.addRoomsForm.get('rooms')).push(new FormControl(''));
}

这是我的component.html

<form [formGroup]="addRoomsForm">
        <button class="btn btn-primary pull-right" id="add_row" (click)="insertRow()">
          <i class="fa fa-plus" aria-hidden="true"></i> Add Row</button>
        <div class="table table-striped">
          <table class="table" id="tab_logic">
            <thead>
              <tr>
                <th>#Id</th>
                <th>{{'ALL_ROOMS.OPTIONS.ROOM_NAME' | translate}}</th>
                <th>{{'ALL_ROOMS.OPTIONS.ACTION' | translate}}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let room of rooms" (click)="navigateForView(room)">
                <td>{{room.id}}</td>
                <td>{{room.name}}</td>
                <td>
                  <button type="button" class="btn btn-info" (click)="removeRoom(room.id)">Delete</button>
                  <button type="button" class="btn btn-info f-btn-align" (click)="navigateForUpdate(room)">Update</button>
                </td>
              </tr>
              <tr id='addr1'>
                <td></td>
                <td>
                  <div class="form-group" *ngFor="let room of addRoomsForm.get('rooms').controls; let i = index">
                    <input type="text" [formControlName]="i" class="form-control border-input" placeholder="Room Name">
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="clearfix "></div>
      </form>

最后我正在创建新的动态输入控件。但是，当我单击“添加行”按钮时，它将添加带有输入元素的新行，但会出现这样的错误

AllRoomsComponent.html:35 ERROR Error: Cannot find control with unspecified name attribute

指导我，如何在按钮上单击formControlName的表中创建动态输入控件？