首页 文章

如何在角度为2的循环中使用[(ngModel)]生成双向绑定的名称属性?

提问于
浏览
1

首先,我不明白为什么Angular 2在使用[(ngModel)]进行绑定输入时需要name属性 . 否则,我收到此错误:

ERROR Error: If ngModel is used within a form tag, either the name
    attribute must be set or the form control must be defined as 
    'standalone' in ngModelOptions.

这通常不是问题,但我如何使用* ngFor在循环中执行此操作?索引(如角度1中的$ index)是否可用?

2 回答

  • 1

    您可以通过这种方式获取索引,并使用 i 变量创建明确的输入名称 .

    <ul *ngFor="let item of items; let i = index">
        <input name="{{i}}"/>
    </ul>
    
  • 0

    要解决这个问题:

    首先,我不明白为什么Angular 2在使用[(ngModel)]进行绑定输入时需要name属性

    从这里收集了一些信息:Official docs for Forms

    首先,我们只需要表格 . 将 [(ngModel)] 与表单结合使用时,需要使用Name属性 .

    在内部,Angular创建 FormControl 实例并使用NgForm指令注册它们 . Angular会自动将 NgForm 指令附加到 <form> -tag . NgForm 指令补充了具有附加功能的表单元素 . 它包含您为具有 ngModel 指令和 name 属性的元素创建的控件,并监视其属性,包括其有效性 .

    每个 FormControl 都以您分配给 name 属性的名称注册 . 因此,这意味着每个名称都必须是唯一的,否则,每个具有相同名称的字段将被评估为同一个 .

    通常,在循环之外,它就足够了:

    <input [(ngModel)]="item.name" name="name">
    

    但是在循环内部这是不够的,因为所有字段都具有相同的 name -attribute .

    所以像Eduardo建议的那样,当你循环时,使用索引可以很容易地解决这个问题:

    <ul *ngFor="let item of items; let i = index">
        <input [(ngModel)]="item.name" name="name{{i}}"/>
    </ul>
    

相关问题