Angular 2 dynamic control name attr

Facing issue with radio button while using tab. when i gave dynamic name it creating ng-relfect-name but not name attribute that's why my tab index not working.I need to give name attribute in order to work tab correctly.

<div class="col-sm-5 form-inline">
    <span *ngFor="let rv of q.responsetypevalues; let j = index " [ngSwitch]="q.responsetype">
        <label *ngSwitchCase="'checkbox'">
            <input class="form-check-input" type="checkbox" [(ngModel)]="model.questions[i].responsetypevalues[j].checked" name="model.questions[{{i}}].responsetypevalues[{{j}}].checked"> {{rv.value}}
        </label>
        <label *ngSwitchCase="'radio'">
            <input class="form-check-input" name="model.questions[{{i}}].answer" type="radio" [(ngModel)]="model.questions[i].answer"  [value]="rv.id"> {{rv.value}}
        </label>
        <input *ngSwitchDefault type="text" class="form-control" [(ngModel)]="model.questions[i].responsetypevalues[j].value" name="model.questions[{{i}}].responsetypevalues[{{j}}].value" [value]="rv.value" />
    </span>
    <div class="error">{{q.errormsg}}</div>
</div>


ANSWERS:


You don't need {{}} inside expression. Just i will do.

<input class="form-check-input" type="checkbox" [(ngModel)]="model.questions[i].responsetypevalues[j].checked" name="model.questions[i].responsetypevalues[j].checked"> {{rv.value}}

The [] around ngModel already tells Angular that the value is an expression.

An alternative way for binding strings is

src=""

(no [] around src)

If you want the attribute in the DOM (Angular2 bindings by default bind to property, not attribute) use [attr.name]="model.questions[i].answer" or attr.name="{{model.questions[i].answer}}"


emphasized texti have used [attr.name] in order to add name attribute:

<input class="form-check-input"  type="radio" [(ngModel)]="model.questions[i].answer" name="model.questions[{{i}}].answer" [attr.name]="i" [value]="rv.id" />

html look like

<label>
<input class="form-check-input ng-pristine ng-valid ng-touched" type="radio"
ng-reflect-name="model.questions[4].answer" ng-reflect-value="12"
value="12" name="4"> Very Easy
</label> 
<label>
<input class="form-check-input ng-pristine ng-valid ng-touched" type="radio"
 ng-reflect-name="model.questions[4].answer" ng-reflect-value="13" value="13" name="4"> Easy</label> 
<label>
<input class="form-check-input ng-pristine ng-valid ng-touched" type="radio"
 ng-reflect-name="model.questions[8].answer" ng-reflect-value="16"
 value="16" name="8"> Very Satisfied
</label> <label>
<input class="form-check-input ng-pristine ng-valid ng-touched" type="radio"
ng-reflect-name="model.questions[8].answer" ng-reflect-value="17"
 value="17" name="8"> Satisfied
 </label>

now you can see name attribute, angular is not populating name attribute if you use {{}} in name, and if you do not use {{}} it will print the value as string without evaluating.that cause issue in default functionality of html radio button tab index, as it based on name attribute.



 MORE:


 ? Angular 2 dynamic control name attr
 ? C# dynamic control names in .NET CF
 ? How can I get the Name of current control to dynamically assign control text?
 ? .NET Dynamically Get Control By Name
 ? Creating dynamic controls
 ? Dynamic controls not rendering in WinForm
 ? Handling Dynamic Controls
 ? How to build dynamic controls in angular js using json?
 ? Angular 2 set dynamic functions name on element
 ? Setting the hostname based on tags from dynamic inventory