Angular 响应式表单 - FormArray 和 pacthValue

Question

我在将 patchValue 与 formArray 结合使用时遇到问题。我有一个用 <ul>、<li> 制作的自定义 select，单击一个选项会执行一个方法，该方法应该在 [=17] 中修补选项 selected 的 id =] 将包含格式数组中属性的值。

表单是这样构建的：

  this.roleForm = this.fb.group({
    profiles: this.fb.array([ this.fb.group({perfil: '', accion: ''}) ])
  })

这是在数组中添加新配置文件的方法：

  addProfile() {
    const prof = this.roleForm.get('profiles') as FormArray;
    prof.push(this.fb.group({
      perfil: [''],
      accion: ['']
    }))
  }

这是 html:

<div class="col-md-8" formArrayName="profiles">
  <div class="row" *ngFor="let profile of getProfiles(); let i = index">
    <div class="col-md-6" [formGroupName]="i">
      <div class="col-12">
        <div class="card card-primary bg-white">
          <div class="card-header h4">
            Perfil
          </div>
          <ul class="list-group list-group-flush register h5 scroll-list">
            <li *ngFor="let profileType of profileTypes; index as i" 
                class="list-group-item rounded-0 pointer" 
                [ngClass]="{'selected bg-primary text-white font-weight-bold': this.selectedProfile === profileType.profileId}" 
                (click)="selectProfile(profileType.profileId, i)">
              {{profileType.profileDescription}}
            </li>
          </ul>
          <input formControlName="perfil" type="text" />
        </div>
      </div>
    </div>
  </div>
</div>

编辑：

我必须在此方法中使用 patchValue 以在具有相同索引的输入中设置 selected 值。但是我无法使 at() 方法工作，这总是 returns 我未定义：

selectProfile(profileType.profileId, i) {
 let x = (<FormArray>this.roleForm.get('profiles')).at(i);
 console.log(x)
}

Answer 1

我猜你的问题是模板变量的重复声明 i:

<div class="col-md-8" formArrayName="profiles">
  <div class="row" *ngFor="let profile of getProfiles(); let outterI = index"> <!-- declared here -->
    <div class="col-md-6" [formGroupName]="outterI">
      <div class="col-12">
        <div class="card card-primary bg-white">
          <div class="card-header h4">
            Perfil
          </div>
          <ul class="list-group list-group-flush register h5 scroll-list">
            <!-- and here -->
            <li *ngFor="let profileType of profileTypes; index as innerI" 
                class="list-group-item rounded-0 pointer" 
                [ngClass]="{'selected bg-primary text-white font-weight-bold': this.selectedProfile === profileType.profileId}" 
                (click)="selectProfile(profileType.profileId, outterI)">
              {{profileType.profileDescription}}
            </li>
          </ul>
          <input formControlName="perfil" type="text" />
        </div>
      </div>
    </div>
  </div>
</div>

使用 ngFor 时无需声明索引变量，但如果您不使用它，因为在此示例中您似乎没有使用 innerI。

Angular 响应式表单 - FormArray 和 pacthValue

Angular Reactive Forms - FormArray and pacthValue

javascript

angular

angular-reactive-forms

formarray