【问题标题】:Form Name not changing in template drive form angular 4表单名称在模板驱动的表单角度4中没有改变
【发布时间】:2018-01-15 15:35:48
【问题描述】:

数组拼接后 *ngFor 不更新表单输入名称。

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

{ “问题0”:“scascsac”, "selectElem0": "radio_button", “is_other0”:假, “radioBtn_0”:“ascsacsac”, "radioBtn_2": "asccscascssaccsacsscsca", “radioBtn_3”:“ascsacsacsacsacsac” }

addOption(){

this.f._submitted = false;
this.questions.options.push({logic : {}});

}

删除选项(索引){

this.questions.options.splice(index,1);

console.log(this.questions.options);

}

我在下面的链接中复制了上述场景:

https://stackblitz.com/edit/angular-kzyfky?file=app%2Fapp.component.html

【问题讨论】:

  • 您需要将一个新实例传递给 ngfor 以进行 cd tp 工作
  • 数组删除或推送值后输入字段名称不变
  • 你能在 stackblitz 中重现这个吗

标签: angular angular4-forms


【解决方案1】:

删除名称并添加 [ngModelOptions]="{standalone: true}"

【讨论】:

    猜你喜欢
    • 2018-11-25
    • 1970-01-01
    • 2021-05-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-02-09
    • 2011-09-01
    • 1970-01-01
    相关资源
    最近更新 更多