CODEWITHSUNDEEP
angular
K.Z
K.Z

Reputation: 5075

Angular how to configure separate name property for input type radio where multiple inputs initialise in loop

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

Upvotes: 0

Views: 629

Answers (1)

Toshkata Tonev
Toshkata Tonev

Reputation: 1491

 <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.

Upvotes: 1

Related Questions