* ngFor-错误的名称控件的无值访问器

Question

我在我的angular 8应用程序中使用formGroup。我可以获取用户名值，但是使用* ngFor会报错 Error: No value accessor for form control with name: 'userRoleMappings'

userRoleMappings需要具有一系列角色。

我做错了什么？谢谢

这是我的HTML和组件。而且，这是一个视频，向您展示我的需求

https://ttprivatenew.s3.amazonaws.com/pulse/bozzodj/attachments/11603436/TinyTake02-10-2019-10-14-18.mp4

this.addNewUserForm = this.formBuilder.group({
      username: "",
      userRoleMappings: []   //here I need to add array with selected roles
    });

<form [formGroup]="addNewUserForm" (ngSubmit)="submitForm()">
  <div class="modal-boy">
    <div class="container">
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" class="form-control" formControlName="username" />
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-sm-6">
            <div class="card">
              <div class="card-body">
                <h6>Available roles</h6>
                <div class="items1 dragAndDropList" [sortablejs]="userRole" [sortablejsOptions]="options">
                  <div *ngFor="let role of userRole">
                    {{ role }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="card">
              <div class="card-body">
                <h6>Selected roles</h6>
                <div class="items2 dragAndDropList" [sortablejs]="selectedRole" [sortablejsOptions]="options">
                  <div *ngFor="let selectedRole of selectedRole" formControlName="userRoleMappings">{{ selectedRole }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-success" [disabled]="!addNewUserForm.valid">
      Submit Form
     </button>
  </div>
</form>