0

I have multiple radio inputs initialising in loop in template and I have issue as I am using formControlName and because of input type name and ngModel, I believe. Because name property of input type radio for multiple input initialising is same, my ngModel blows up. I need to find way to either give unique value to name property for each input in loop or some other mechanism.

I have referenceKey value which have unique value per input but because of formControlName it may not work???

my question is how I use unique name property for input in loop

template

 <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 [name]="sub_opt.name" type="radio" [formControlName]="question.key" [value]="sub_opt.key" [(ngModel)]="opt.selectedOption"> <span>{{sub_opt.selectedOptionState}}</span>
                    </label>     
                </div>
  </div>

component

 else  if(questionElementType=="matrixRadio")
 {
   let _martrixRadio = new MatrixQuestion ({
     consultationId: questionsList[key].consultationId,
     questionId: questionsList[key].questionId,
     questionElementType: questionsList[key].questionElementType[0].title,             
     questionType: questionsList[key].questionType,
     title:questionsList[key].title,
     displayId: questionsList[key].displayId,
     key: questionsList[key].questionId,     

     label: questionsList[key].title,
     order: 9,
     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 {"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)), 
   });

matrix class

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'] || [];
  }
}
1
  • You can try using a concatenation of question.key and sub_opt.name so that the name should be unique and doesn't conflict with formControlName Commented Apr 16, 2018 at 13:01

1 Answer 1

1
 <div class="grid-row" *ngFor="let opt of question.options ; let i = index">
                <div class="flex-item">{{opt.subQuestionTitle}}</div>
                <div *ngFor="let sub_opt of opt.subOption ; let j = index">
                    <label class="flex-item">
                        <input [name]="sub_opt.name+'_'+i+'_'+j" type="radio" [formControlName]="question.key" [value]="sub_opt.key" [(ngModel)]="opt.selectedOption"> <span>{{sub_opt.selectedOptionState}}</span>
                    </label>     
                </div>
  </div>

You can set an index variables inside the for loops and to use them as a sufux for your name.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.