包含具有 Angular FormArray 的单选按钮的 FormGroup

Question

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

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按钮时，新的表单组出现，每次我select组数组中的任何单选按钮，第一个数组项的相应单选按钮在小组中的是 selected.

Answer 1

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

您需要使用可用的 i 变量，使每个输入的 id 和 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 属性也是如此。

您可能需要尝试一下才能准确找到它需要的位置。（我没有仔细测试）

希望这对您有所帮助。

Answer 2

我好像错过了这一行 id="{{ 'unacceptable' + i}}" 用于 id 和标签。

包含具有 Angular FormArray 的单选按钮的 FormGroup

FormGroup containing Radio Buttons with an Angular FormArray

angular

angular-reactive-forms

angular-forms