2017-12-18 1 views
0

私は角型テンプレートを使っていますが、私はデフォルトで入力タグの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); 
} 

答えて

0

あなたの情報に応じて、フォームで正しく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'] 
} 
0

CodeNashorに回答するには、私はAngular4を使用していますが、彼のソリューションは近いです。私は[(ngModel)]を使ってみましたが、巨大なエラーリストがありましたので、ngModel = "value"を試しました。

関連する問題