Angular2,我在循环中有多个输入类型的无线电初始化。我正在使用[formControlName],并且问题是所有输入类型在生成的代码中都具有相同的ng-reflect-form-control-name,因此ngModel失败。
目前在代码[formControlName] =" question.key"我需要的地方是[formControlName] =" opt.key"但如果我这样做就会抛出错误。
question.key是主要问题Id,opt.key是子问题ID
我需要帮助为每个输入类型的无线电分离键分配唯一的密钥' opt.key',不确定我缺少什么???
Cannot find control with name: 'c20ae971-bbf4-4317-aa6e-3d0ccd6a7edf'
c20ae971-bbf4-4317-aa6e-3d0ccd6a7edf是我当前实例中opt.key的值
<div class="grid-row" *ngFor="let opt of question.options">
<div class="flex-item">{{opt.subQuestionTitle}}</div>
<div *ngFor="let sub_opt of opt.subOption">
<label class="flex-item">
<input type="radio" [formControlName]="question.key" [value]="sub_opt.key"> <span>{{sub_opt.selectedOptionState}}{{opt.key}}</span>
</label>
</div>
</div>
else if(questionElementType=="matrixRadio")
{
let _martrixRadio = new MatrixQuestion ({
questionId: questionsList[key].questionId,
key: questionsList[key].questionId,
options: questionsList[key].subQuestions.map(function(item){
return {"key": item.questionDetail.questionId, "subQuestionTitle": item.questionDetail.title, "selectedOption":this.getSubAnswer(questionsList[key].answer, item.questionDetail.questionId) ,subOption:
item.preDefineAnswerOptions.map(function(subItem){
return {"name": item.ReferenceKey, "key":subItem.preDefineAnswerOptionId, "value":subItem.text ,"displayOrder":subItem.displayOrder, "selectedOptionState": subItem.preDefineAnswerOptionId ==this.getSubAnswer(questionsList[key].answer, item.questionDetail.questionId)? "true" :"false"}
}.bind(this))
}
}.bind(this)),
});
export class MatrixQuestion extends QuestionBase<string> {
controlType = 'matrixRadio';
options: {subQuestionTitle: string; name:string, key: string, value: string}[] = [];
constructor(options: {} = {}) {
super(options);
this.options = options['options'] || [];
}
}
export class QuestionBase<T>{
consultationId: string;
questionId: string;
questionElementId:string;
questionType:string;
title:string;
value: T;
displayId:string;
key: string;
label: string;
required: boolean;
order: number;
controlType: string;
constructor(options: {
consultationId?:string,
questionId?:string,
questionElementId?:string,
questionType?:string,
title?:string,
value?: T,
displayId?:string;
key?: string,
label?: string,
required?: boolean,
order?: number,
controlType?: string
} = {}) {
this.consultationId = options.consultationId,
this.questionId = options.questionId,
this.questionElementId = options.questionElementId,
this.questionType = options.questionType,
this.title = options.title,
this.value = options.value;
this.displayId = options.displayId;
this.key = options.key || '';
this.label = options.label || '';
this.required = !!options.required;
this.order = options.order === undefined ? 1 : options.order;
this.controlType = options.controlType || '';
}
}