如何在Angular中为嵌套输入类型添加[formControlName]

时间:2018-04-17 09:02:44

标签: angular

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 || '';
 }
}

0 个答案:

没有答案