3

我有以下代码动态添加包含标题和两个单选按钮的表单组以创建条件，有效地提供其标题以及它是否是可接受的条件：

export enum Acceptability {
  ACCEPTABLE,
  INACCEPTABLE
}

export interface Condition {
  title: string;
  acceptability: Acceptability;
}

export class AddCondition implements OnInit {

  form: FormGroup;
  ACCEPTABILITY = Acceptability;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // build the form
    this.form = this.fb.group({
      conditions: this.fb.array([])
    });

  }

  get conditions(): FormArray {
    return this.form.get('conditions') as FormArray;
  }

  addCondition() {
    this.conditions.push(this.fb.group({
      title: ['', Validators.required],
      acceptability: ['', Validators.required]
    }));
  }
}
<div formArrayName="conditions">
  <div *ngFor="let condition of conditions.controls; let i=index" [formGroupName]="i">
    <input class="form-control" formControlName="title" type="text" placeholder="title">
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" id="acceptable" formControlName="acceptability" name="acceptability" class="custom-control-input" [value]="ACCEPTABILITY.ACCEPTABLE">
      <label class="custom-control-label" for="acceptable">Acceptable</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" id="inacceptable" formControlName="acceptability" name="acceptability" class="custom-control-input" [value]="ACCEPTABILITY.INACCEPTABLE">
      <label class="custom-control-label" for="inacceptable">Inacceptable</label>
    </div>
  </div>
  <button type="button" class="btn btn-outline-dark btn-block" (click)="addCondition()">
          <i class="fa fa-plus fa-lg mr-3"></i>ADD A NEW CONDITION</button>
</div>

问题是，当单击 ADD A NEW CONDITION 按钮并出现新的表单组时，每次我选择组数组中的任何单选按钮时，组中第一个数组项的相应单选按钮就是被选中的单选按钮.

4

2 回答 2

6

遍历数组组时需要考虑的是id分配name给每个数组组。您当前有输入id并name在每个循环中设置为相同的值。

您需要使用i可用的变量来使每个输入的idand成为动态值，如下所示：name

<div [formGroup]="form">
  <div *ngIf="conditions" formArrayName="conditions">

    <div *ngFor="let condition of conditions.controls; let i=index" [formGroupName]="i">

      <input class="form-control" formControlName="title" type="text" placeholder="title">

      <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="{{ 'acceptable' + i}}" formControlName="acceptability"
            class="custom-control-input" [value]="ACCEPTABILITY.ACCEPTABLE">
        <label class="custom-control-label" for="{{ 'acceptable' + i}}">Acceptable</label>
      </div>

      <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="{{ 'unacceptable' + i}}" formControlName="acceptability"
            class="custom-control-input" [value]="ACCEPTABILITY.INACCEPTABLE">
        <label class="custom-control-label" for="{{ 'unacceptable' + i}}">Unacceptable</label>
      </div>

    </div>

    <button type="button" class="btn btn-outline-dark btn-block" (click)="addCondition()">
            <i class="fa fa-plus fa-lg mr-3"></i>ADD A NEW CONDITION</button>
  </div>
</div>

<div>
  <pre>{{ form.value | json }}</pre>
</div>

注意name和id属性的字符串插值。for标签中的 for 属性也是如此。

你可能不得不玩弄它才能得到它需要的确切位置。（我没有彻底测试过）

希望这可以帮助。

于 2018-01-14T17:25:27.097 回答
0

我似乎错过 id="{{ 'unacceptable' + i}}" 了 id 和 label 的这一行。

于 2021-07-04T08:38:40.143 回答