Angular 表单数组重复字段问题

Question

我有两个问题：

1) 所有 select 框中显示相同的值 2）点击添加，添加了两个select框，我只想添加一个

我已经在 https://stackblitz.com/edit/angular-ngxs-select-form-solved

上上传了一个演示

Answer 1

https://stackblitz.com/edit/angular-ngxs-select-form-solved-rnz3hz 试试这个。

您必须将值添加到 formControl 而不是 ngModel，来自 ngModel 的值不会反映在使用 formControlName 的绑定中。

在动态生成的输入中使用 formControlName 的绑定：

<div formArrayName="userTechnologies">
    <!-- loop throught units -->
    <div *ngFor="let unit of form['controls'].userTechnologies['controls']; let i = index ">
        <!-- row divider show for every nex row exclude if first row -->
        <div *ngIf="form['controls'].userTechnologies['controls'].length > 1 && i > 0">
            <hr>
        </div>
        <div [formGroupName]="i">
            <div class="form-group">
                <label>Technologies</label>
                <select class="form-control" formControlName="user_technology">
                    <option value="">Select Technology</option>
                    <option *ngFor="let technology of technologies | async" [value]="technology.id">
           {{technology.name}}
        </option>
                </select>
                <div *ngIf="unit['controls'].user_technology.invalid" class="alert alert-danger">
                    <div *ngIf="unit['controls'].user_technology.errors.required">
                        Technology is required.
                    </div>
                </div>
            </div>
            <button class="btn btn-danger" *ngIf="form['controls'].userTechnologies['controls'].length > 1" (click)="removeTechnology(i)">Delete</button>
        </div>
    </div>
    <button class="btn btn-primary" (click)="addTechnology()">Add</button>
</div>

在您的 .ts 中，addTechnology 应该适用于新输入和动态生成的输入以设置其值

  addTechnology(tech = '') {  //<--Edited this
    const control = <FormArray>this.form.controls['userTechnologies'];
    control.push(this.getTechnology(tech));  //<--Edited this
    this.editname = ''; //<--Added this
    this.form.controls.userTechnologies.updateValueAndValidity(); //<--Added this
  }

  getTechnology(tech = '') {
    return this.fb.group({
      user_technology: [tech, Validators.required] //<--Edited this
    });
  }

并在赋值的同时，调用addTechnology生成动态控件：

  showUser(id) {
    this.editdetails$ = this.store.select(UserState.userByIndex)
      .pipe(map(filterFn => filterFn(id)));

    this.editdetails$.subscribe(response => {
      this.edituserarray = [];
      this.editid = response.id;
      this.editname = response.name;
      var technologies = response.technology.split(',');
      for (let tech of technologies) {
        let newName = {
          techno: tech
        };
        // this.edituserarray.push(newName); //<--- Commented this
        this.addTechnology(tech); //<--- Added this
      }
    })
  }

Angular 表单数组重复字段问题

Angular Form array duplicate fields issue

ngrx

angular

ngxs