Создание переключателя Dynami c с использованием заданного идентификатора и получение выбранного значения

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 ОШИБКА Ошибка: не удается найти элемент управления с именем: '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 в HTML 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);
  }
}

на этом этапе вы динамически создали FormControls для каждого фрагмента данных, который вам нужен. теперь вы должны иметь возможность использовать это в своем 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>
                  

Надеюсь, что некоторые из этих сведений были полезны. Реактивные формы - очень мощный способ создания динамических c форм для этих типов сценариев ios. Я бы посоветовал вам просмотреть ссылку выше из Angular docs

удачи.

Answer 2

Ошибка сообщает вам, что FormControl '8651' не существует.

Я ожидал увидеть al oop в вашем ts коде, чтобы добавить элемент управления для этого числа.

Итак, вместо

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

я ожидал увидеть что-то такое или подобное ...

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

примечание, я думаю, что нотация массива такая же, как и в fb .control, но перепроверьте документы. Я просто добавил его, чтобы лучше понять, что на самом деле делает для вас .group.