Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 700
Rohit Sindhu Avatar asked Nov 28 '16 14:11

Rohit Sindhu


Video Answer


1 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="{{imgSourceProp}}.png"

(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}}"

like image 188
Günter Zöchbauer Avatar answered Sep 29 '22 19:09

Günter Zöchbauer