使用给定的 Id 创建动态单选按钮并获取所选值

Question

要求

这是我拥有的 json...

[
  {
    "id": 8651,
    "value": "Abdominal pain"
  },
  {
    "id": 8646,
    "value": "Chest pain"
  },
  {
    "id": 8642,
    "value": "Cough"
  }
]

使用它我需要使用这样的选项创建用户。

Abdominal pain  □ Yes       □ No
Cough   □ Yes       □ No
Chest pain  □ Yes       □ No

一旦用户做出选择，需要为每个 Id 获取选择的值。如下所示。

[
  {
    "id": 8651,
    "selectedValue": "Y"
  },
  {
    "id": 8646,
    "selectedValue": "N"
  },
  {
    "id": 8642,
    "selectedValue": "Y"
  }
]

我尝试了什么 像这样创建了一个表单条目

<form [formGroup]="symptomsForm">
   <div>
                <ul class="list-group">
                      <li class="list-group-item"  *ngFor="let obj of symptomsParams">
                      <span> {{obj.value}} </span> 
                        <span class="form-radio">
                          <input formControlName="{{obj.id}}" type="radio" /> 
                          <label>Yes</label>
                        </span>
                        <span class="form-radio">
                          <input formControlName="obj.id" type="radio" />
                          <label>No</label>
                        </span>
                      </li>
                </ul>
              </div>
</form>

它返回错误... core.js:15723 ERROR 错误：找不到名称为“8651”的控件 {{obj.value}}，显示为空

组件代码

constructor() {

    this.symptomsForm = this.fb.group({
      symptoms: ['']
    });
}

这看起来不是实现此要求的正确方法，请提出一种实现此要求的方法。

还有，要求 2

 [
      {
        "id": 8651,
        "value": "Abdominal pain",
        "selectedValue": "N"
      },
      {
        "id": 8646,
        "value": "Chest pain",
        "selectedValue": "N"
      },
      {
        "id": 8642,
        "value": "Cough",
        "selectedValue": "N"
      }
    ]

那么列表必须选中相应的单选按钮

Answer 1

错误告诉您 FormControl '8651' 不存在。

我希望在您的 ts 代码中看到一个循环来为该数字添加一个控件。

所以，而不是

 this.symptomsForm = this.fb.group({
      symptoms: ['']
    });

我希望看到能做到这一点或类似的东西......

 this.symptomsForm = this.fb.group({
      8651: [false],
      // 8651: this.fb.control(false),
    });

注意，我认为数组表示法与 fb.control 调用相同，但请仔细检查文档。我刚刚添加它是为了更好地解释 .group 实际为您做什么。

Answer 2

根据您在此处粘贴的内容，我强烈建议您阅读并浏览文档中的 Reactive forms

• 为了在 HTML 中引用 formControl，必须创建 formControl 并将其添加到 formGroup
• 在您的示例中，您尝试将 HTML 绑定到尚未创建的表单控件。这就是您看到错误的原因。

例如

// the interface isn't required, but is useful for typechecking
export interface OptionI {
  id number,
  label: string
};

export class MyComponent {
  form: FormGroup;
  options: OptionI[];

  constructor( private fb: FormBuilder) {
    this.options = [data]; // insert your data object here. you can hard code it to start, but eventually you'll probably want to get it from somewhere else.
    this.setupForm(this.options);
  }

  setupForm(options: OptionI[]) {
     const fg = {};
     data.forEach( (option: OptionI) => {
        // create the properties of the form control that will be passed to the form Builder.
        // treat the id as a string to ensure to avoid javascript treating the id as an index.
        fg[id+''] = [ false, Validators.required];
        // you the first value in the array is the default value for this control. in this case we are setting the default value to false
        // the Validators are optional in case you ever had more than a radio button
     };
     this.form = this.fb.group(fg);
  }
}

此时，您已经为所需的每条数据动态创建了 FormControl。您现在应该可以在 HTML 中使用它来访问表单控件值了。

<ul class="list-group">
   <li class="list-group-item"  *ngFor="let obj of options">
      <span> {{obj.label}} </span> 
      <span class="form-radio">
         <input [formControlName]="obj.id+''" type="radio" value="true" /> 
         <label>Yes</label>
      </span>
      <span class="form-radio">
        <input [formControlName]="obj.id+''" type="radio" value="false" />
        <label>No</label>
      </span>
   </li>
</ul>
                  

希望其中的一些内容对您有所帮助。反应式表单是为这些类型的场景创建动态表单的一种非常强大的方式。我鼓励您查看 Angular 文档中的上述链接

祝你好运。