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

Posted 2023-01-09

我在我的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>

答案

您需要使用一个formarray，因为当前只有一个窗体控件-

userRoleMappings: this.formBuilder.array([])。

模板语法很棘手，看起来像下面的-example

<div formArrayName="items"
  *ngFor="let item of orderForm.get('items').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="name" placeholder="Item name">
    <input formControlName="description" placeholder="Item description">
    <input formControlName="price" placeholder="Item price">
  </div>

  Chosen name:  orderForm.controls.items.controls[i].controls.name.value 
</div>