包含带有角度 FormArray 的单选按钮的 FormGroup [英] FormGroup containing Radio Buttons with an Angular FormArray

查看：28
本文介绍了包含带有角度 FormArray 的单选按钮的 FormGroup的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

export enum Acceptability {可以接受，不可接受}导出接口条件{标题:字符串；可接受性:可接受性；}导出类 AddCondition 实现 OnInit {表格:表格组；可接受性 = 可接受性；构造函数(私有 fb:FormBuilder){}ngOnInit() {//构建表单this.form = this.fb.group({条件:this.fb.array([])});}获取条件():FormArray {返回 this.form.get('conditions') 作为 FormArray;}添加条件(){this.conditions.push(this.fb.group({标题: ['', Validators.required],可接受性:['', Validators.required]}));}}

<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 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>

<button type="button" class="btn btn-outline-dark btn-block" (click)="addCondition()"><i class="fa fa-plus fa-lg mr-3"></i>添加新条件</button>

问题是点击ADD A NEW CONDITION按钮，出现新的表单组时，每次选择组数组中的任意单选按钮时，组中第一个数组项对应的单选按钮为被选中.

解决方案

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

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

<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 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}}">不可接受</label>

<button type="button" class="btn btn-outline-dark btn-block" (click)="addCondition()"><i class="fa fa-plus fa-lg mr-3"></i>添加新条件</button>

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

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

您可能需要解决这个问题才能得到它需要的位置.(我没有彻底测试)

希望这会有所帮助.

I have the following code that dynamically adds a form group containing a title and two radio buttons to create a condition, effectively providing its title and whether or not it's an acceptable condition:

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>

The problem is that when clicking the ADD A NEW CONDITION button, and the new form group appears, every time I select any radio button in the group array, the corresponding radio button of the first array item in the group is the one that gets selected.

解决方案

What you need to consider when looping through an array group is the id and name you assign to each one. You currently have your input id and name getting set to the same value in each loop.

You would need to use the i variable you have available to make the id and name for each input a dynamic value, like below:

<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>

Notice the string interpolation for the name and id attributes. Same goes for the for attribute in the labels.

You may have to play around with this to get is exactly where it needs to be. (I didn't test it thoroughly)

Hope this helps.

这篇关于包含带有角度 FormArray 的单选按钮的 FormGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆