角度动态形式的单选按钮

Question

我是使用角度动态表单的新手，我遇到了单选按钮问题，当我选择单选按钮选项时，所选单选按钮的值不会反映在 FormGroup 的实例中。为了说明情况，我将向您展示相关代码：

我有两个组件：

• 动态形式
• 动态形式问题

dynamic-form 通过 toFormGroup(answers):FormGroup 方法接收答案列表，该答案列表在 dynamic-form-question 组件中呈现为单选按钮， dynamic-form 还构建了一个表单，该表单被传输到 dynamic-form-question 组件。

每个组件的代码下方：

dynamic-form.html

<form (ngSubmit)="onSubmit()" [formGroup]="form">
  <div *ngFor="let answer of answers$ | async">
    <app-question [answer]="answer" [form]="form"></app-question>
  </div>
</form>

dynamic-form.ts

    @Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css'],
  providers: [ AnswerControlService ]
})
export class DynamicFormComponent implements OnInit {
  @Input() answers$: Observable<AnswerBase<any>[]>;
  form: FormGroup;
  payLoad = '';

  constructor(private qcs: AnswerControlService, private service: DynamicFormService) {  }

  ngOnInit() {
    this.form= new FormGroup({});
    this.answers$.subscribe(a=>this.form = this.qcs.toFormGroup(a));
  }

  onSubmit() {
    this.payLoad=JSON.stringify(this.form.value);
  }

dynamic-form-question.html

<div [formGroup]="form">
<label [attr.for]="answer.id">{{answer.label}}</label>

<div [ngSwitch]="answer.controlType">

  <input *ngSwitchCase="'radio'" [formControlName]="answer.controlName"
          [id]="answer.id" [type]="answer.type" [value]="answer.label">
</div> 
<div class="errorMessage" *ngIf="!isValid">{{answer.label}} is required</div>

dynamic-form-question.ts

   @Component({
  selector: 'app-question',
  templateUrl: './dynamic-form-question.component.html',
  styleUrls: ['./dynamic-form-question.component.css']
})
export class DynamicFormQuestionComponent {
  @Input() answer: AnswerBase<any>;
  @Input() form: FormGroup;
  @Input() currentQuestion:Question;

  get isValid() { 
    return this.form.controls[this.answer.controlName].valid;
  }
}

当我选择一个单选按钮选项时，会出现两个问题：

1. 选项的选择不是相互排斥的，即使 answer.controlName 属性对于所有选项具有相同的值。

1. 当我调用onSubmit() 方法时，选择了一些或所有选项。没有为控件分配值属性。接下来我给大家展示一下我的控制台在onSubmit()方法被调用时的例子。

我希望有人能帮我解决这个问题，因为我已经尝试了几个小时，但我不知道为什么会这样。非常感谢！

Answer 1

使用与dynamic form documentation 中的下拉示例相同的行为

question-radio.ts

import { QuestionBase } from './question-base';

export class RadioQuestion extends QuestionBase<string> {
  controlType = 'radio';
  options: {key: string, value: string}[] = [];

  constructor(options: {} = {}) {
    super(options);
    this.options = options['options'] || [];
  }
}

question.service.ts

new RadioQuestion({
        key: 'sex',
        label: 'Sex',
        type: 'radio',
        options: [
          {key: 'Male',  value: 'm'},
          {key: 'Female',  value: 'f'}
        ],
        required: true,
        order: 4
      })

dynamic-form-question.html

<div *ngSwitchCase="'radio'">
      <label *ngFor="let opt of question.options">
        {{opt.key}}
        <input
          type="radio"
          [name]="question.key"
          [formControlName]="question.key"
          [value]="opt.value">
      </label>
    </div>