我尝试构建一个组件,允许用户为单选或多选问卷添加选项。
在这里,
isSingleChoice
确定是否只有一个答案是正确的(单选),或者是否没有或所有答案都是正确的(多选)。
为了制作“一体式”解决方案,我将
input
和 mat-checkbox
(多选)或 mat-radio-button
(单选)包裹在 mat-radio-group
中。
<mat-radio-group fxLayout="column" formArrayName="options">
<div fxLayout="row" *ngFor="let option of options.controls; let idx = index">
<div [formGroup]="option">
<mat-form-field appearance="outline">
<mat-label>Option</mat-label>
<input matInput placeholder="1916" formControlName="content"/>
</mat-form-field>
<mat-checkbox *ngIf="!isSingleChoice" formControlName="isCorrect">Correct</mat-checkbox>
<mat-radio-button *ngIf="isSingleChoice" formControlName="isCorrect">Correct</mat-radio-button>
</div>
</div>
</mat-radio-group>
单选变体没有任何问题。但是,如果我使用多选变体,则会出现以下错误:
core.mjs:8453 ERROR Error: NG01203: No value accessor for form control name: 'isCorrect'. Find more at https://angular.io/errors/NG01203
at _throwMissingValueAccessorError (forms.mjs:3163:11)
at setUpControl (forms.mjs:2936:13)
at FormGroupDirective.addControl (forms.mjs:4771:9)
at FormControlName._setUpControl (forms.mjs:5321:43)
at FormControlName.ngOnChanges (forms.mjs:5266:18)
...
formControlName
似乎在 mat-radio-button
元素上不起作用,我不确定如何使它起作用;如果有可能的话。