angular - Angular 动态形式的单选按钮

Question

我是使用 Angular 动态表单的新手，我遇到了单选按钮的问题，当我选择单选按钮选项时，所选单选按钮的值未反射(reflect)在 FormGroup 的实例中。为了说明这种情况，我将向您展示相关代码:

我有两个组件:

• 动态形式
• 动态表单问题

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

各组件代码如下:

动态表单.html

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

动态表单问题.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>

动态表单问题.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
      })

动态表单问题.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>