Question

我使用Angular模板表单，我有一些值，我应该使用输入标记的value属性默认设置。目前没有任何默认值通过。

<form #npcCreateForm="ngForm" (ngSubmit)="createNpc(npcCreateForm)">
<label for="name">Name</label>
<input type="text" name="name" ngModel>
<label for="race">Race</label>
<input type="text" name="race" ngModel>
<label for="characterClass">Class</label>
<input type="text" name="characterClass" ngModel>
<label for="level">Level</label>
<input type="number" name="level" ngModel max="20" min="1" value="1">

我缩短了表格，因为我有几个属性像最后一个一样重复。我还要详细说明我能够检索任何输入的数据，因此这不是问题。以下是从组件中获取数据的内容：

createNpc(createForm: NgForm) {
  let formValue = createForm.value;
  console.log(formValue);
  let createdNpc: Npc = new Npc(formValue.name, formValue.race, formValue.characterClass, formValue.level, formValue.strength, formValue.dexterity, formValue.constitution, formValue.intelligence, formValue.wisdom, formValue.charisma, formValue.difficultyLevel);
  console.log(createdNpc);
  createdNpc.equipmentList = this.localEquipmentList;
  this.dataService.addNpc(createdNpc);
}

Answer 1

根据您的信息（不知道您的Angular版本和其他内容），以下是如何使用表单正确绑定输入和ngModel：

<form #npcCreateForm="ngForm" (ngSubmit)="createNpc()">
<label for="name">Name</label>
<input type="text" name="name" [(ngModel)]="name">
</form>

在您的组件中，它看起来像这样：

name: string;

createNpc() {
     console.log(this.name);
}

如果您想通过表单进行操作，则需要@ViewChild：

@ViewChild('npcCreateForm') npcCreateForm: FormGroupDirective;

createNpc() {
    const formGroup: FormGroup = npcCreateForm.form;
    // this.formGroup.controls['name']
}

Answer 2

要回答CodeNashor，我正在使用Angular4，他的解决方案很接近。我尝试使用[（ngModel）]，但我得到了一个巨大的错误列表，所以我尝试了ngModel =“value”，这似乎有效。

默认值不通过我的Angular Form

2 个答案: