Angular 6 FormArrays中的RadioButtons-维护form.value的结构

Question

I'm trying to get along with FormArrays and radio buttons in Angular 6, and somehow cannot get what I want.

I want to initialize the form values based on JSON-like object (server response) - this part is mostly working - and at the same time - get the same object structure back - which is where I have problem.

Instead I see the form.value changes the supplied property from boolean to string (an option's id).

https://stackblitz.com/edit/angular-checkbox-radio

I also want to be able to patch a value onto an existing form, such as for editing.

I would like to do it in a declarative and reactive way, without resorting to ngModel or other mixing of techniques - if possible.

What/Where am I doing wrong?, please help me before I yarn add ng-formly in desperation...

Answer 1

You can add the fields that you want in the final value of the form in the buildSkills and buildLevels methods:

buildSkills() {
  const arr = this.user.skills.map(skill => {
    return this.fb.group({
      name: skill.name,
      id: skill.id,
      selected: skill.selected,
    });
  });
  return this.fb.array(arr);
}

buildLevels() {
  const arr = this.user.levels.map(level => {
    return this.fb.group({
      name: level.name,
      groupId: level.groupId,
      id: level.id,
      selected: level.selected,
    });
  });
  return this.fb.array(arr);
}