Question

我在json对象中有4个单选按钮组。所有单选按钮都被选中。还可以在表单提交中获取所有值（包括未选择的值）。我希望只选择一个单选按钮，并只获得选定的值。

我已经使用formbuilder创建了formgroup。然后遍历所有无线电组，并为每个组创建formarray。最后，我将所有无线电控件中的所有单个控件推入各自的formarray。

我在控制台上遇到以下错误：

错误错误：找不到路径为'5-> 5'的控件在下面的行： <input type="radio" formControlName="{{formControls .Control_Id}}" [value]="radio.value">

下面是JSON对象，一些ts文件代码以及用于填充所有单选按钮组的HTML标记。

JSON对象来自数据库。所以我不知道那里有多少个无线电控制。

/*JSON Object :*/

activityList :any= [
   "FormControls": [
    { "Control_Id": "1", "Control_Option": ["Auto parts", "Tyre shop", "Puncture"] },
    { "Control_Id": "2", "Control_Option": ["Yes", "No"] },
    { "Control_Id": "3", "Control_Option": ["Tyre", "Tube", "Both"] },
    { "Control_Id": "4", "Control_Option": ["Yes", "No"] }
  ]
];

/* TS Code */

this.activityForm = this.fb.group({})

    this.activityList[0].FormControls.forEach(control => {
      if (control.Control_Type === 'radio') {
        this.formTemplate.push(control);

        this.activityForm.addControl(control.Control_Id, this.fb.array([]))

        control.Control_Option.map((o, i) => {
          const ctrl = new FormControl(i === 0);
          (this.activityForm.controls[control.Control_Id] as FormArray).push(ctrl);
        });
      }
    });

/* HTML code */

<form [formGroup]="activityForm" (ngSubmit)="onSubmit()">
            <div *ngFor="let formControls of formTemplate">
                <div [formArrayName]="formControls .Control_Id">
                    <div *ngFor="let radio of activityForm.controls[form_control.Control_Id].controls; let i = index">
                        <label>
                            <input type="radio" formControlName="{{formControls .Control_Id}}" [value]="radio.value">
                            <span>{{ radio.value }}</span>
                        </label>
                    </div>
                </div>
            </div>
        </form>

以角反应形式从json对象生成动态单选按钮组

0 个答案: