模板驱动器表单中的表单名称未更改 angular 4
Form Name not changing in template drive form angular 4
数组拼接后*ng为不更新表单输入名称。
<div class="row p-t-20" *ngFor="let multiple_option of questions.options; let i=index">
<div class="col-md-10">
<div class="form-group">
<label class="control-label">Option {{i + 1}}</label>
<input type="text" [(ngModel)]="multiple_option.value" class="form-control" name="radioBtn_{{i}}" #radioBtn="ngModel" required >
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-success btn-circle" (click)="addOption()"><i class="fa fa-plus"></i> </button>
</div>
<div class="col-md-1" [hidden]="i == 0">
<button type="button" class="btn btn-warning btn-circle" (click)="removeOption(i)"><i class="fa fa-minus"></i> </button>
</div>
{{f.value | json}}
{
"question0": "scascsac",
"selectElem0": "radio_button",
"is_other0":错误,
"radioBtn_0": "ascsacsac",
"radioBtn_2": "asccscascssaccsacsscsca",
"radioBtn_3": "ascsacsacsacsacsac"
}
添加选项(){
this.f._submitted = false;
this.questions.options.push({logic : {}});
}
删除选项(索引){
this.questions.options.splice(index,1);
console.log(this.questions.options);
}
我在下面复制了上面的场景 link:
https://stackblitz.com/edit/angular-kzyfky?file=app%2Fapp.component.html
删除名称并添加 [ngModelOptions]="{standalone: true}"
数组拼接后*ng为不更新表单输入名称。
<div class="row p-t-20" *ngFor="let multiple_option of questions.options; let i=index">
<div class="col-md-10">
<div class="form-group">
<label class="control-label">Option {{i + 1}}</label>
<input type="text" [(ngModel)]="multiple_option.value" class="form-control" name="radioBtn_{{i}}" #radioBtn="ngModel" required >
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-success btn-circle" (click)="addOption()"><i class="fa fa-plus"></i> </button>
</div>
<div class="col-md-1" [hidden]="i == 0">
<button type="button" class="btn btn-warning btn-circle" (click)="removeOption(i)"><i class="fa fa-minus"></i> </button>
</div>
{{f.value | json}}
{ "question0": "scascsac", "selectElem0": "radio_button", "is_other0":错误, "radioBtn_0": "ascsacsac", "radioBtn_2": "asccscascssaccsacsscsca", "radioBtn_3": "ascsacsacsacsacsac" }
添加选项(){
this.f._submitted = false;
this.questions.options.push({logic : {}});
}
删除选项(索引){
this.questions.options.splice(index,1);
console.log(this.questions.options);
}
我在下面复制了上面的场景 link:
https://stackblitz.com/edit/angular-kzyfky?file=app%2Fapp.component.html
删除名称并添加 [ngModelOptions]="{standalone: true}"