Javascript ngModels的Angular 4数组-如何处理name属性

这是我的班级：

interface IHobby {
  name: string;
  type: string;
}

class User {
  constructor(public name: string, public hobbies: IHobby[]) { }
}

现在我试着用Angular 4做一个模板表单。我注意到为了显示爱好，我需要反复浏览它们。下面是我的HTML：

<div *ngFor="let h of user.hobbies; let i = index">
    #{{i}}<br />
  <input [(ngModel)]="h.name" name="hobby_name[{{i}}]" /> <br /><br />
  <input [(ngModel)]="h.type" name="type[{{i}}]" />
    <br /><br />
  <button class="btn btn-warn" (click)="remove(i)">Remove</button>
    <br /><br />
</div>

#{{i}}







去除

虽然这样做有效，但我不太确定：

我以正确的角度4方式执行此操作-我是否应该为数组中的每个项目使用

ngModel

可以将名称定义为

name=“hobby_name[{{i}}]”

？因为

name=“hobby\u name{{{i}}”

也可以工作。HTML5和Angular 4的正确方式是什么

---

这里有一个工作示例：

您实际上不需要使用name属性，因为您将输入直接绑定到模型。如果您希望看到模型中的即时更改，可以继续使用[（ngModel）]，但如果您只想在表单提交时更新模型，则不应使用ngModel。我会这样做：

<div [formGroup]="form">
    <div formArrayName="hobbiesFormArray">
        <div *ngFor="let h of user.hobbies; let i = index" [formGroupName]="i">
            #{{i}}<br />
          <input formControlName="name" /> <br /><br />
          <input formControlName="type" />
            <br /><br />
          <button class="btn btn-warn" (click)="remove(i)">Remove</button>
            <br /><br />
        </div>
    </div>
</div>

然后在onSubmit方法中，我将表单模型转换回用户对象：

const formModel = this.form.value;

const newHobbies: IHobby[] = formModel.hobbiesFormArray
                        .map(() => (hobby: IHobby) => Object.assign({}, hobby))

const newUser: User = {
  name: formModel.name as string,
  hobbies: newHobbies
};

---

并使用任何方法保存newUser对象。

谢谢您的输入。然而，我已经知道如何在反应式表单中处理这个问题，我正在尝试学习模板表单。按照您的建议删除

name

属性，我会得到以下错误：

如果表单标记中使用了ngModel，则必须设置name属性，或者必须在ngModelOptions中将表单控件定义为“standalone”。

const formModel = this.form.value;

const newHobbies: IHobby[] = formModel.hobbiesFormArray
                        .map(() => (hobby: IHobby) => Object.assign({}, hobby))

const newUser: User = {
  name: formModel.name as string,
  hobbies: newHobbies
};