我有以下代码，动态添加一个包含标题和两个单选按钮的表单组来创建条件，有效地提供其标题以及它是否是可接受的条件：
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>
问题是，当单击“添加新条件”按钮并出现新表单组时，每次我选择组数组中的任何单选按钮时，组中第一个数组项的相应单选按钮就是被选中的单选按钮。
循环数组组时需要考虑的是id and name你分配给每一个。您目前有您的输入id and name在每个循环中设置为相同的值。
您需要使用i您可以使用的变量id and 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 and id属性。同样如此for标签中的 for 属性。
您可能需要尝试一下才能得到它需要的位置。 （我没有彻底测试过）
希望这可以帮助。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
