Angular 2 dynamic control name attr

Question

Stop using the switch when using the tab. when I gave the dynamic name, it created ng-relfect-name, but did not name the attribute name, why my tab index is not working. I need to specify a name attribute for the tab to work properly.

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

Answer 1

underlined texti used [attr.name] to add the 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 the name attribute, angular does not fill in the name attribute if you use {{}} in the name, and if you do not use {{}}, it will print the value as a string without evaluation. issue the html radio button tab index in the default function, because it is based on the name attribute.

Answer 2

You do not need {{}} inside the expression. Only 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}} 

[] around ngModel already tells Angular that this expression is an expression.

An alternative way to bind strings is

 src="{{imgSourceProp}}.png" 

(no [] around src )

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